媒体查询使用

作者: 走在风口的猪 | 来源:发表于2017-11-02 19:26 被阅读0次

day05-移动web开发－bootstrap（响应式开发）
浅谈CSS3 响应式布局--Media Queries
移动端是怎么做适配的?
媒体查询使用
媒体查询
响应式网站的思考
移动端布局方式
css media
在JS代码中使用媒体查询
bootstrap3 媒体查询栅格参数

现在，一般我们在写PC端代码时都是响应式布局的，但是有时候，我们还是需要用到媒体查询的，话不多说，老规矩，上代码。

第一种：最大到多少 --max-width:xxx px

@media screen and (max-width: 1400px){
      xxxxxxxxxxxxx代码块xxxxxxxxxxxxxxxxxxx
}

G))QI0OFIFT0_X70EO9G6W0.png

第二种：最小到多少，下面举例，min-width:xxx px

 @media screen and (min-width:1400px) {
   xxxxxxxxxxxxx代码块xxxxxxxxxxxxxxxxxxx
}

image.png

第三种：最小多少到最大多少之间，下面举例，min-width:xxx px and max-width:xxx px

 @media screen and (min-width:1400px) and (max-width:1920px){
     xxxxxxxxxxxxx代码块xxxxxxxxxxxxxxxxxxx
}

)K7T3)7TRSZ3QW3`)CB(P04.png

下面是小例子（虽然我觉得确实很丑）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
        }
        @media screen and (max-width: 1400px){
            .box{
                background: yellow;
            }
        }
        @media screen and (min-width:1400px) and (max-width:1920px){
            .box{
                background: blue;
            }
        }
        @media screen and (min-width:1920px) {
            .box{
                background: green;
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

示例的三种状态
NO.1