媒体查询

媒体查询是CSS3的一个重要特性，通过它能让样式表针对不同的设备类型和媒介类型设置不同的样式规则。这项功能是响应式web设计的基础，它可以让网站在不同设备、不同屏幕尺寸下都能呈现出更佳的效果。

媒体查询语法

媒体查询的基本语法如下：

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

mediatype

mediatype代表媒介类型，主要包括以下几种：

• all — 所有设备

• print — 打印机或打印预览

• screen — 彩色计算机屏幕

• speech — 语音合成功能（屏幕阅读器等）

media feature

media feature代表设备和设备性能的一些特征，可分为以下三种：

1. 宽度与高度相关的特性：

• width：设备宽度

• height：设备高度

• aspect-ratio：设备宽高比

• device-width：渲染区域宽度

• device-height：渲染区域高度

2. 颜色相关的特性：

• color：设备颜色的位数

• color-index：设备颜色的数目

3. 交互相关的特性：

• hover：鼠标是否悬停于设备上

• pointer：设备是否使用触摸屏等设备进行交互

除此之外，还有很多其他的媒体查询特性，例如：

• min-width/max-width：设备最小/最大宽度

• min-height/max-height：设备最小/最大高度

示例

以下是一个简单的媒体查询的示例，它根据浏览器的宽度来设置背景颜色的不同效果：

/* 默认样式 */
body { background-color: white; }

/* 在 600px 或以上的浏览器宽度下，背景颜色为蓝色 */
@media only screen and (min-width: 600px) {
  body { background-color: blue; }
}

/* 在 900px 或以上的浏览器宽度下，背景颜色为绿色 */
@media only screen and (min-width: 900px) {
  body { background-color: green; }
}

兼容性

媒体查询在各大浏览器中已有广泛支持，但还是需要注意一些兼容性问题。

• 在旧版浏览器中不支持媒体查询，需要借助JavaScript等方式来实现响应式布局。

• Internet Explorer 8不支持媒体查询，但可以借助Respond.js脚本实现CSS3的媒体查询。