媒体查询使用

现在，一般我们在写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