CSS3学习笔记--media query 响应式布局

时间 2019-12-13

标签 css3 css 学习笔记 media query 响应布局栏目 CSS 繁體版

原文原文链接

语法：@media screen and (min-width: 320px) and (max-width : 479px)javascript

media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。而后用 and 关键字来链接条件（其余关键字还有 not， only，看字面你们能理解，就很少说。），而后括号里就是一个媒体查询语句，稍微懂点css的同窗都能看懂，这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。css

通常大于960的显示器均可以用默认样式而没必要在媒体查询里判断了。有一种状况除外，就是高像素比的终端，好比 iphone4以上的retina屏，一个iphone5的小小的屏幕（iphone的屏幕是真小啊），他的分辨率居然达到了1136*640，几乎等于一个笔记本的分辨率。你在这样小的物理显示界面打开一个网页，他用1136的分辨率来显示，结果就是全部元素小的可怜。html

在面对这种分辨率精细的终端，咱们有另一个条件查询语句 device-pixel-ratio。java

好比例子里的web

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)浏览器

就是判断终端的像素比是2的话，所渲染的样式。iphone4以上像素比是2，高分辨率Andriod设备像素比是1.5，例子里只有像素比为2的查询，1.5的或者其余比例方法同样，前面用的是几种浏览器的私有属性，最后一种是通用属性。app

演示代码：iphone

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>响应式布局</title>
        <style type="text/css">
            div {
                background: #ccc;
                width: 100%;
                height: 400px;
                border: 2px solid #4183C4;
            }
            span {
                display: block;
                float: left;
                background: #007902;
                color: #fff;
                line-height: 25px;
                padding: 10px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 2px solid #fff;
            }
            @media screen and (max-width: 400px) {
                span {
                    width: 100%;
                }
            }
            @media screen and (min-width: 400px) and (max-width: 800px) {
                span {
                    width: 50%;
                }
            }
            @media screen and (min-width: 800px) {
                span {
                    width: 25%;
                }
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var divCon = document.createElement('div');
                var span;
                for (var i = 0; i < 5; i++) {
                    span = document.createElement('span');
                    span.innerHTML = "内容块-" + i;
                    divCon.appendChild(span);
                }
                document.body.appendChild(divCon);
                //alert(divCon.offsetWidth);
            }
        </script>
    </head>
    <body>
        <h3>若是大于屏幕宽度小于400px就一列显示,400px-800px两列显示，800像素以上四列显示</h3>
    </body>
</html>

View Code