CSS 媒体查询
CSS 媒体查询
在 CSS2 中引入的 @media 规则使得为不同的媒体类型定义不同的样式规则成为可能。
CSS3 中的媒体查询扩展了 CSS2 媒体类型理念：它不再寻找设备类型，而是寻找设备的功能。
媒体查询可以用来检查很多东西，例如
- 视窗的宽度和高度
- 视窗的方向（横向或纵向）
- 分辨率
使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和移动电话（如 iPhone 和 Android 手机）提供定制的样式表。
CSS 媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有媒体类型设备 |
| 用于打印预览模式 | |
| screen | 用于电脑屏幕、平板电脑、智能手机等 |
CSS 常用媒体功能
以下是一些常用的媒体功能
| 值 | 描述 |
|---|---|
| orientation | 视窗的方向。横向或纵向 |
| max-height | 视窗的最大高度 |
| min-height | 视窗的最小高度 |
| height | 视窗的高度（包括滚动条） |
| max-width | 视窗的最大宽度 |
| min-width | 视窗的最小宽度 |
| width | 视窗的宽度（包括滚动条） |
媒体查询语法
媒体查询由媒体类型组成，可以包含一个或多个媒体功能，这些功能解析为真或假。
@media not|only mediatype and (media feature) and (media feature) {
CSS-Code;
}
mediatype 是可选的（如果省略，它将被设置为 all）。但是，如果使用 not 或 only，则必须指定 mediatype。
如果指定的媒体类型与文档正在显示的设备类型匹配，并且媒体查询中的所有媒体功能都为真，则查询结果为真。当媒体查询为真时，相应的样式表或样式规则将被应用，遵循正常的级联规则。
not、only 和 and 关键字的含义
not: 此关键字反转整个媒体查询的含义。
only: 此关键字阻止不支持媒体查询的旧版浏览器应用指定的样式。它对现代浏览器没有影响。
和： 此关键字将媒体类型和一个或多个媒体特征组合在一起。
您还可以链接到针对不同媒体和不同浏览器窗口宽度（视窗）的不同样式表。
<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 规则。
