Media Query

媒体查询（Media Query）在 CSS2 中就已经存在了，但是只能查询 Media Type，CSS3 中除了能查询 Media Type 外，还加入了 Media Feature 的查询。

语法

媒体查询包含一个“媒体类型（Media Type）”以及至少一个测试“媒体特性（Media Feature）”的表达式，表达式和媒体类型将根据实际情况计算的到 true 或者 false。如果指定的媒体类型符合当前设备并且媒体特性表达式都为真，那当前媒体查询为真，Media Query 为 true，对应的样式规则生效。

1

@media [媒体类型] 媒体特性 {}

除非使用了 not 或 only 操作符，否则 Media Type 是可选的，默认值为 all

逻辑运算符

and 用于结合多个媒体特性或媒体类型到一个 Media Query。

1
2
3
4
5
6
7
8

/* Media Type 为 all 时 Media Feature 为 min-width 700 */
@media (min-width: 700px) {}

/* 可以使用 and 添加限制条件 */
@media (min-width: 700px) and (orientation: landscape) {}

/* 使用 and 添加 Media Type，限制媒体类型为显示器 */
@media screen and (min-width: 700px) and (orientation: landscape) {}

, 用于结合多个 Media Query ，任 一Media Query 为 true 时应用样式，相当于逻辑运算符中的 or。

1
2

/* 宽度大于 700px，或者宽度大于高度的显示器上 */
@media (min-width: 700px), screen and (orientation: landscape) {}

not 用于对整个 Media Query 结果取反，必须位于一个 Media Query 的开头。另外，在逗号分隔的多个 Media Query 中，not 只对它作用的 Media Query 生效。not 不能对单个 Media Feature 取反，只能作用于整个 Media Query。

1
2
3
4
5
6
7

/* not 将在最后求值 */
/* 等价于 @media not (print and (max-width:1024px)){} */
@media not print and (max-width:1024px) {}

/* 多个 Media Query 求值 */
/* 求值顺序如下 @media (not (screen and (color))), print and (color) {} */
@media not screen and (color), print and (color) {}

only 用于向早期浏览器隐藏媒体查询，only 必须位于 Media Query 的开头。

1

@media only screen and (min-width:400px) and (max-width:600px) {}

无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表，规范要求：它们应该在第一个不是连字符的非数字、字母之前截断每个值。所以上面的示例解释为：

1

@media only {}

因为没有 only 这样的媒体类型，所以样式表被忽略。如果不加 only，下面的示例会被解析为 @media screen {} 这样一来即使浏览器不知道 Media Query 的真正含义，样式也会应用于所有屏幕设备。

尽管存在此行为，如果希望向其他不太常用的浏览器隐藏样式，任然建议在媒体查询前面添加 only。

1

@media screen and (min-width:400px) and (max-width:600px) {}

媒体类型（Media Type）

注意：在 CSS2.1 和 CSS3 Media Query 中定义的 Media Type：tty、tv、projection、handheld、braille、embossed、aural，在media queries level 4 中都废弃了，不推荐使用。

媒体特性（Media Feature）

上面是一些常见的 Media Feature，不是全部，Media Feature 的维度很多，但是最常用的是 viewport 的 width 和 height。

使用方式

在 CSS2 中，媒体查询只使用于 <style> 和 <link> 标签中，以 media 属性来查询，CSS3 中可以用 @media 来查询。

1
2
3
4

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:900px)">

1
2
3

<style type="text/css" media="screen">
  @import url("css/style.css");
</style>

1

@import url("css/reset.css") screen;

1
2
3
4
5

@media screen {
  选择器 {
    属性: 属性值;
  }
}

Media Query 常用方法

• 排他（exclusive）

为确保在某一个条件下只有一个样式表生效，将查询条件严格划分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@media (max-width: 400px) {
  html{
    background: red;
  }
}
@media (min-width: 401px) and (max-width: 800px) {
  html{
    background: green;
  }
}
@media (min-width: 801px) {
  html{
    background: blue;
  }
}

• 覆盖（overriding）

可以对元素设置相同优先级，使用样式顺序，通过覆盖，避免排他。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@media (min-width: 400px) {
  html{
    background: red;
  }
}
@media (min-width: 600px) {
  html{
    background: green;
  }
}
@media (min-width: 800px) {
  html{
    background: blue;
  }
}

• 移动优先（Mobile first）

默认样式假设为移动设备宽度，然后通过 min-width 控制扩展样式。

1
2
3
4
5
6
7

html {
  background: red;
}
@media (min-width: 768px) {
  html{background: green;
}
}

BootStrap 移动优先，断点分别为 768、992、1200，这三个断点的区间对应手机、平板、桌面、大桌面。

• PC 优先（desktop first）

默认以宽屏进行样式设置，通过 max-width 控制样式覆盖。

1
2
3
4
5
6
7
8

html {
  background: red;
}
@media (max-width: 600px) {
  html {
    background: green;
  }
}