CSS 媒体查询

1110字约4分钟

css

2018-08-18

开发响应式网站时，常常需要使用到 media 媒体查询。这里总结下媒体查询的使用方法。

概述

媒体查询是通过判断当前媒体是否满足媒体查询规则，从而使其包含的 CSS规则生效。

从 CSS level 2 开始，就已经支持 media-queries，到 CSS level 3 以及之后的版本，媒体查询变得更加的丰富和能够适应更多的场景。

使用

媒体查询可以通过以下三种方式进行使用：

在 `<link>` 元素引入CSS资源时，声明 `media` 属性

<link rel="stylesheet" type="text/css" href="media/custom.css" media="screen and (min-width: 400px)" />

在`<style>` 上声明 `media` 属性

<style media="screen and (min-width: 400px)"></style>

在`@import` 后声明媒体查询条件

@import url('custom.css') screen and (min-width: 400px);

在样式表中使用 At-Rule `@media` 使用媒体查询规则

@media screen and (min-width: 400px) {
  .example {
    color: red;
  }
}

语法

<link rel="stylesheet" type="text/css" href="media/custom.css" media="[media-queries-list]" />

<style media="[media-queries-list]"></style>

<style>
    @import url [media-queries-list];

    @media [media-queries-list] {
      <style-sheet-group>
  }
</style>

媒体查询 [media-queries-list]

media-queries-list 可以由以下三种内容组成：

Media types ：媒体类型, 表示设备
Media features ：媒体特性, 表示设备的状态
Logical operators ：逻辑操作符, 连接多个 media-query

Media types

Media types 描述设备的一般类型。可以使用以下值：

all: 表示适用于所有设备。默认值。
print: 表示适用于在屏幕上以打印预览的模式查看页面和文档。
screen: 表示适用于屏幕。

在 css2.1 和 Media Queries 3 中还支持 tty，tv，projection，handheld，braille，embossed，aural，但这些值都已经在Media Queries 4 中被弃用。

Media features

媒体特性，描述用户代理、输出设备以及环境的特定特征。

媒体特性表达式是完全是可选的，并且负责测试这些特性是否存在，值为多少。且每个媒体特性表达式都必须使用括号括起来。

以下仅列出比较常用到的媒体特性：

width: 视窗（viewport）的宽度，包括纵向滚动条的宽度。
值的类型为 number，单位可以是 px、em 等。
```
with: 400px;
```
height: 视窗（viewport）的高度。
值的类型为 number，单位可以是 px、em 等。
```
height: 600px;
```
aspect-ratio：视窗（viewport）的宽高比。
值的类型为 number/number。
```
aspect-ratio: 3/2;
```
orientation：视窗（viewport）的旋转方向。
- portrait：设备竖屏
- landscape：设备横屏
```
orientation: landscape;
```
resolution: 输出设备的分辨率
值的类型为 number，单位为 dpi。
```
resolution: 320dpi;
```
scan：输出设备的扫描过程（适用于电视机等）。

媒体特性前缀

大部分的媒体特性均支持前缀，用于约束媒体特性的作用范围。

max-[media feature]：小于指定的最大值时，返回true
min-[media feature]: 大于指定的最小值时，返回true

个人认为使用前缀时其表述稍显拗口，建议使用取值范围的方式声明表达式：

媒体特性语法

以键值对的形式，表述取固定的值

([media-feature-name]: [media-feature-value])

直接书写name，表示值的结果为 boolean
```
([media-feature-name])
```

表述特性的取值范围

声明 range 为描述数学符号 : '<' | '>' | '<=' | '>='

([media-feature-name] [range] [media-feature-value])
([media-feature-name] [range] [media-feature-value] [range] [media-feature-value])

Logical operators

逻辑操作符用于组成复合的 media queries。

and: 用于合并多条media query, 且每条 media query 均返回 true 时，媒体查询表达式的结果返回true。
not: 取反操作，使用not [media query]，当media query 返回 false 时，媒体查询表达式的结果返回true。
,: or操作符，组合多个 media query，任意一个media query 返回 true, 媒体查询表达式的结果返回true。
only: 不支持更加高级的媒体类型的浏览器检测到only修饰的时候就会抛弃这个规则

使用示例详解

示例1

@media screen and (width > 414px) {
}

当设备的屏幕视窗宽度大于414px时，应用CSS块中的样式规则。

示例2

@media (width > 800px), screen and (orientation: landscape) {
}

当前设备视窗宽度大于 800px，或者设备方向为横向时，应用css块中的样式规则。

示例3

@media screen and (414px < width < 800px) {
}