CSS3 媒体查询

1. 什么是媒体查询

CSS3媒体查询（Media Query）语法的特性：

①使用 @media 查询，可以针对不同的媒体类型定义不同的样式；
②@media 可以针对不同的屏幕尺寸设置不同的样式；
③当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 ；
④目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询.

2. 媒体查询的语法规范

@media mediatype and|not|only (media feature) {
   /* CSS样式 */
}

①用 @media 开头 注意@符号

②mediatype 是媒体类型，比如常见的为screen(表示电脑屏幕、平板电脑、智能手机等）、print(表示打印机和打印预览）、all(表示所有设备）

③关键字 and not only
（1）and：表示可以将多个媒体特性连接到一起，相当于“且”的意思
（2）not：表示排除某个媒体类型，相当于“非”的意思，可以省略
（3）only：表示指定某个特定的媒体类型，可以省