媒体查询使用

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

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

示例的三种状态
NO.1

G))QI0OFIFT0_X70EO9G6W0.png

NO.2

image.png

NO.3

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