媒体查询Media Queries，可以根据不同的设备为其实现不同的样式。@media可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适应移动端、pc端等，在调整浏览器的大小，页面会根据媒体的宽度和高度来重新布置样式。
媒体查询可以用于检测很多东西：自动检测viewpoint（视窗）的宽度和高度；设备的宽度和高度；旋转方向（智能手机横屏或竖屏）；分辨率大小。
@media的语法规则：
- 必须是以 @media 开头
- 然后指定设备类型（媒体类型mediatype）
- 接着是括号()里的规定媒体/设备特征（media feature），媒体特征的书写格式与css样式类似，都是属性名：属性值（例如min-width：200px）
- 最后跟着的大括号{ css-code }，里面放置的是要设置的css样式。
如：
@media screen and (max-width: 700px) {
body {background-color:lightblue;}
}
以上代码表示当浏览器最大宽度为700时生效的样式
