媒体查询

什么是媒体查询

媒体查询（Media Query）是CSS3新语法

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

语法规范

@media mediatype and|not|only (media feature) {
	CSS-Code;
}

• 用@media 开头 注意@符号
• mediatype 媒体类型
• 关键字 and not only
• media feature 媒体特性 必须有小括号包含

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机

关键字

​ 关键字将媒体类型或多个媒体特性连接到一切做为媒体查询的条件

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

媒体特性

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度