css3媒体查询@media

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。（IE9+）

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

（项目案例讲解，见我另一篇博客https://blog.csdn.net/xiasohuai/article/details/81836036）

语法：

@media mediatype and（在）|  not（不再）|only （仅在）(media feature （设备尺寸）) {
       /*样式代码*/
 }

首先，在html的meta中写入

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  name=”viewport”  说明此meta标签定义视口的属性

  initial-scale=1.0   意思是将页面不放大，还是1.0

  width=device-width   告诉浏览器页面的宽度等于设备宽度

常见媒体尺寸：

@media screen and (min-width:480px)

@media screen and (min-width:768px)

@media screen and (min-width:992px)

@media screen and (min-width:1200px)

注：在设置时，需要注意先后顺序，不然后面的会覆

 

如下案例：

and关键词

当屏幕宽度小于300px时候，屏幕背景颜色就会变为淡蓝色。否则为淡绿色。

body {
    background-color:lightgreen;
}

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

 当屏幕在600~900之间则用#f5f5f5来做背景

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。