CSS媒体查询（@media）全面解析

﹏ヽ暗。殇╰゛Y 2023-10-09 20:51 10阅读 0赞

随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到[媒体查询][Link 1]。  
  
媒体查询是 CSS [样式表][Link 2]最重要的功能之一，所谓媒体查询指的就是根据不同的**媒体类型（设备类型）和条件**来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很好的用户体验。

### 1. 媒体类型 ###

媒体类型用来表示设备的类别，CSS 中提供了一些关键字来表示不同的媒体类型，如下表所示：

<table> 
 <tbody> 
  <tr> 
   <th>媒体类型</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>all</td> 
   <td>表示所有的媒体设备</td> 
  </tr> 
  <tr> 
   <td>aural</td> 
   <td>（听觉的，听的）表示语音和音频合成器（听觉设备）</td> 
  </tr> 
  <tr> 
   <td>braille</td> 
   <td>（用盲文写的）表示盲人用点字法触觉回馈设备</td> 
  </tr> 
  <tr> 
   <td>embossed</td> 
   <td>表示盲人用点字法打印机</td> 
  </tr> 
  <tr> 
   <td>handheld</td> 
   <td>表示小型手持设备，如手机、平板电脑</td> 
  </tr> 
  <tr> 
   <td>print</td> 
   <td>表示打印机</td> 
  </tr> 
  <tr> 
   <td>projection</td> 
   <td>表示投影设备</td> 
  </tr> 
  <tr> 
   <td>screen</td> 
   <td>表示电脑显示器</td> 
  </tr> 
  <tr> 
   <td>tty</td> 
   <td>表示使用固定密度字母栅格的媒体，比如打字机或终端设备</td> 
  </tr> 
  <tr> 
   <td>tv</td> 
   <td>表示电视机类型的设备</td> 
  </tr> 
 </tbody> 
</table>

### 2. 媒体特性 ###

除了具体的类型外，还可以通过一些属性来描述**设备的具体特征**，例如宽度、高度、分辨率等，如下表所示：

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>aspect-ratio</td> 
   <td>（纵横比）输出设备页面可见区域的宽高比</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0</td> 
  </tr> 
  <tr> 
   <td>color-index</td> 
   <td>输出设备的颜色查询表中的条目数量。如果没有使用颜色查询表，则该值等于 0</td> 
  </tr> 
  <tr> 
   <td>device-aspect-ratio</td> 
   <td>输出设备的宽高比</td> 
  </tr> 
  <tr> 
   <td>device-height</td> 
   <td>输出设备屏幕的可见高度</td> 
  </tr> 
  <tr> 
   <td>device-width</td> 
   <td>输出设备屏幕的可见宽度</td> 
  </tr> 
  <tr> 
   <td>grid</td> 
   <td>查询输出设备使用的是网格屏幕还是点阵屏幕</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>页面可见区域的高度</td> 
  </tr> 
  <tr> 
   <td>max-aspect-ratio</td> 
   <td>输出设备屏幕可见区域宽度与高度的最大比率</td> 
  </tr> 
  <tr> 
   <td>max-color</td> 
   <td>输出设备每个像素比特值的最大值</td> 
  </tr> 
  <tr> 
   <td>max-color-index</td> 
   <td>输出设备的颜色查询表中的最大条目数</td> 
  </tr> 
  <tr> 
   <td>max-device-aspect-ratio</td> 
   <td>输出设备屏幕可见区域宽度与高度的最大比率</td> 
  </tr> 
  <tr> 
   <td>max-device-height</td> 
   <td>输出设备屏幕可见区域的最大高度</td> 
  </tr> 
  <tr> 
   <td>max-device-width</td> 
   <td>输出设备屏幕的最大可见宽度</td> 
  </tr> 
  <tr> 
   <td>max-height</td> 
   <td>页面可见区域的最大高度</td> 
  </tr> 
  <tr> 
   <td>max-monochrome</td> 
   <td>输出设备单色帧缓冲区中每个像素的最大位深度。如果设备并非黑白屏幕，则该值为 0</td> 
  </tr> 
  <tr> 
   <td>max-resolution</td> 
   <td>设备的最大分辨率</td> 
  </tr> 
  <tr> 
   <td>max-width</td> 
   <td>页面可见区域的最大宽度</td> 
  </tr> 
  <tr> 
   <td>min-aspect-ratio</td> 
   <td>输出设备屏幕可见区域宽度与高度的最小比率</td> 
  </tr> 
  <tr> 
   <td>min-color</td> 
   <td>输出设备每个像素比特值的最小值</td> 
  </tr> 
  <tr> 
   <td>min-color-index</td> 
   <td>输出设备的颜色查询表中的最小条目数</td> 
  </tr> 
  <tr> 
   <td>min-device-aspect-ratio</td> 
   <td>输出设备的屏幕可见区域宽度与高度的最小比率</td> 
  </tr> 
  <tr> 
   <td>min-device-width</td> 
   <td>输出设备的屏幕的最小可见宽度</td> 
  </tr> 
  <tr> 
   <td>min-device-height</td> 
   <td>输出设备的屏幕的最小可见高度</td> 
  </tr> 
  <tr> 
   <td>min-height</td> 
   <td>页面可见区域的最小高度</td> 
  </tr> 
  <tr> 
   <td>min-monochrome</td> 
   <td>输出设备单色帧缓冲区中每个像素的最小位深度。如果设备并非黑白屏幕，则该值为 0</td> 
  </tr> 
  <tr> 
   <td>min-resolution</td> 
   <td>设备的最小分辨率</td> 
  </tr> 
  <tr> 
   <td>min-width</td> 
   <td>页面可见区域的最小宽度</td> 
  </tr> 
  <tr> 
   <td>monochrome</td> 
   <td>输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0</td> 
  </tr> 
  <tr> 
   <td>orientation</td> 
   <td>页面可见区域的旋转方向</td> 
  </tr> 
  <tr> 
   <td>resolution</td> 
   <td>设备的分辨率。如：96dpi、300dpi、118dpcm</td> 
  </tr> 
  <tr> 
   <td>scan</td> 
   <td>电视类设备的扫描工序</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>页面可见区域的宽度</td> 
  </tr> 
 </tbody> 
</table>

### 3. 逻辑操作符 ###

逻辑操作符包含 not、and 和 only 三个，通过逻辑操作符可以构建复杂的媒体查询，您还可以通过逗号来分隔多个媒体查询，将它们组合为一个规则。

*  and：用于将多个媒体查询组合成一条媒体查询，当每个查询规则都为真时则该条媒体查询为真，另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起；
 *  not：用于否定媒体查询，当查询规则不为真时则返回 true，否则返回 false。如果使用 not 操作符，则还必须指定媒体类型；
 *  only：仅在整个查询匹配时才会生效，当不使用 only 时，旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。

### 4. 定义媒体查询 ###

目前您可以通过以下两种方式来定义媒体查询：

*  使用 @media 或 @import 规则在样式表中指定对应的设备类型；
 *  用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。

1) @media

在《[CSS @规则][CSS]》一节中我们已经简单了解 @media，使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。示例代码如下：

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
    @media screen and (max-width: 992px) {
      body {
        background-color: blue;
      }
    }
     
    /* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
    @media screen and (max-width: 600px) {
      body {
        background-color: olive;
      }
    }

2) @import

@import 用来导入指定的外部样式文件并指定目标的媒体类型，示例代码如下：

@import url("css/screen.css") screen;   /* 引入外部样式，该样式仅会应用于电脑显示器 */
    @import url("css/print.css") print;     /* 引入外部样式，该样式仅会应用于打印设备 */
    body {
        background: #f5f5f5;
        line-height: 1.2;
    }

注意：所有 @import 语句都必须出现在样式表的开头，而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。

3) media 属性

您还可以在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询，示例代码如下：

/* 当页面宽度大于等于 900 像素时应用该样式 */
    <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
    /* 当页面宽度小于等于 600 像素时应用该样式 */
    <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

提示：在 media 属性中您还可以指定多种媒体类型，每种媒体类型之间使用逗号进行分隔，例如 media="screen, print"。

[Link 1]: https://so.csdn.net/so/search?q=%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2&spm=1001.2101.3001.7020
[Link 2]: https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020
[CSS]: http://c.biancheng.net/css3/at-rule.html