CSS 媒体查询
CSS 媒体查询
@media 规则，在 CSS2 中引入，使得可以为不同的媒体类型定义不同的样式规则。
CSS3 中的媒体查询扩展了 CSS2 的媒体类型概念：它不是查找设备类型，而是查找设备的功能。
媒体查询可以用来检查许多内容，例如
- 视口的宽度和高度
- 视口的朝向（横向或纵向）
- resolution
使用媒体查询是为桌面、笔记本、平板电脑和手机（如 iPhone 和 Android 手机）提供定制化样式表的流行技术。
CSS 媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有媒体类型的设备 |
| 打印 | 用于打印预览模式 |
| screen | 用于电脑屏幕、平板电脑、智能手机等。 |
CSS 常用媒体特性
以下是一些常用的媒体特性
| 值 | 描述 |
|---|---|
| orientation | 视口的朝向。横向或纵向 |
| max-height | 视口的最大高度 |
| min-height | 视口的最小高度 |
| height | 视口的高度（包括滚动条） |
| max-width | 视口的宽度 |
| min-width | 视口的最小宽度 |
| width | 视口的宽度（包括滚动条） |
媒体查询语法
媒体查询由媒体类型和零个或多个媒体特性组成，媒体特性解析为 true 或 false。
@media not|only mediatype and (media feature) and (media feature) {
CSS-Code;
}
mediatype 是可选的（如果省略，则默认为 all）。但是，如果你使用 not 或 only，你也必须指定一个 mediatype。
如果指定的媒体类型与文档显示所在的设备类型匹配，并且媒体查询中的所有媒体特性都为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，遵循正常的层叠规则。
not、only 和 and 关键字的含义
not: 此关键字反转整个媒体查询的含义。
only: 此关键字可防止不支持媒体查询的旧浏览器应用指定的样式。它对现代浏览器没有影响。
and: 此关键字组合了媒体类型和一个或多个媒体特性。
你还可以为不同的媒体和不同宽度的浏览器窗口（视口）链接不同的样式表
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">
等等...
媒体查询简单示例
使用媒体查询的一种方法是直接在样式表中包含一个备用的 CSS 部分。
以下示例会在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，背景颜色将为粉色）
以下示例显示了一个菜单，当视口宽度为 480 像素或更宽时，该菜单将浮动到页面左侧（如果视口小于 480 像素，菜单将位于内容上方）
示例
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
自己动手试一试 »
更多媒体查询示例
有关更多媒体查询示例，请前往下一页：CSS MQ 示例。
CSS @media 参考
有关所有媒体类型和功能/表达式的完整概述，请参阅我们 CSS 参考中的 @media 规则。
