CSS 媒体查询

CSS2 引入的媒体类型

CSS2 中引入的 @media 规则可以根据不同的媒体类型定义不同的样式规则。

示例：您可以为计算机屏幕设置一组样式规则，为打印机设置一组样式规则，为手持设备设置一组样式规则，为电视类型设备设置一组样式规则，等等。

不幸的是，除了印刷媒体类型之外，其他的媒体类型从未得到设备的大量支持。

CSS3 引入的媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的思想，不再是单纯的寻找设备类型，而是根据设备的功能。

媒体查询可用于检查许多事情，例如：

• 视口的宽度和高度
• 设备的宽度和高度
• 方向（平板电脑/手机处于横向还是纵向模式？）
• 解析度

使用媒体查询是一种向台式机、笔记本电脑、平板电脑和移动电话（例如 iPhone 和 Android 手机）提供定制样式表的流行技术。

媒体查询语法

一个简单的媒体查询语法看起来是这样的：

@media 媒体类型 and (媒体查询表达式) {
  /* CSS 规则 */
}

• 媒体类型：告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷或者屏幕）； 媒体类型前面可以加 not 表示否定。
• 媒体查询表达式：是一个测试设备特征的表达式，比如最大宽度 600， 最小宽度 400 等；
• CSS 规则：会在测试通过且媒体类型正确的时候应用。
• 媒体类型和媒体表达式可以同时都有，也可以只有一个。

您还可以为不同的媒体使用不同的样式表：

CSS3 媒体类型

媒体查询简单示例

如果视口宽度为 480 像素或更宽，背景颜色更改为浅绿色：

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

如果视口宽度为 480 像素或更宽，该菜单将浮动到页面左侧：

@media screen and (min-width: 480px) {
  #leftsidebar {
    width: 200px;
    float: left;
  }
  #main {
    margin-left: 216px;
  }
}

浏览器支持情况

下表列出了完全支持 CSS 媒体查询的第一个浏览器版本。