媒体查询

媒体查询

1、什么是媒体查询

媒体查询（media Query）是css3新语法。
1、使用@media查询，可以针对不同的媒体类型定义不同的样式
2、@media可以针对不同的屏幕尺寸设置不同的样式
3、当你重置浏览器大小过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4、目前针对很对苹果手机、Android手机，平板等设备都用得到多媒体查询

2、语法规范

1、用@media开头，注意@符号

2、mediatype媒体类型

all：用于所以设备
print：用于打印机和打印预览
screen ：用于电脑屏幕，平板电脑，智能手机等。

3、关键字 and not only

and：可以将多个媒体特性连接到一起，相对于“且”的意思
not：排除某个媒体类型，相当于“非”意思，可以省略
only：指定某个特定的媒体类型，可以省略。

4、media feature 媒体特性 必须有小括号包含

我们先了解3个
width： 定义输出设备中页面的可见区域的高度
min-width： 定义输出设备中页面的最小可见区域高度
max-width：定义输出设备中页面的最大可见区域高度