CSS 媒体查询@media-KeepStudy

CSS 媒体查询@media

随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。

媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很好的用户体验。

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

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

### 2. 媒体特性
除了具体的类型外，还可以通过一些属性来描述设备的具体特征，例如宽度、高度、分辨率等，如下表所示：
![](/uploads/20230216/2023021620264277173.jpg)

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

- and：用于将多个媒体查询组合成一条媒体查询，当每个查询规则都为真时则该条媒体查询为真，另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起；
```css
@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:blue;}
}
```

- not：用于否定媒体查询，当查询规则不为真时则返回 true，否则返回 false。如果使用 not 操作符，则还必须指定媒体类型；
```css
//样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
@media not print and (max-width: 1200px){样式代码}
```

- only：仅在整个查询匹配时才会生效，当不使用 only 时，旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。

### 4. 定义媒体查询
目前您可以通过以下两种方式来定义媒体查询：
- 使用 @media 或 @import 规则在样式表中指定对应的设备类型；
- 用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。

##### 1) @media
使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。示例代码如下：
```css
/* 超小屏幕（手机，小于 768px） */
@media (max-width: @screen-xs-min) { ... }
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

/* 在小于或等于 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 用来导入指定的外部样式文件并指定目标的媒体类型，示例代码如下：
```css
@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 属性中来定义媒体查询，示例代码如下：

```css
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

/* 当页面宽度大于等于 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 Query中如果没有明确指定Media Type，那么其默认为all
<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

//在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示
<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />
```
提示：在 media 属性中您还可以指定多种媒体类型，每种媒体类型之间使用逗号进行分隔，例如 media="screen, print"。

顶部

CSS进阶

目录

相关推荐