目录

  1. 定义
  2. 语法逻辑
  3. 使用
    1. 语法
    2. 使用媒体类型
    3. 媒体查询规则
    4. 简写语法
    5. 复杂表达式
    6. and 条件
    7. or 关键词
    8. 使用 not
    9. only
  4. 有用的媒体特性
    1. orientation 媒体查询
    2. 高度和宽度媒体查询
    3. 不带 min- 和 max- 前缀
  5. 媒体属性特征

css的媒体查询允许通过@media标签为特定媒体的浏览器设定样式，其中包含众多筛选，功能强大。

定义

　　HTML4和CSS2支持为不同的媒体类型指定专用的样式表，screen和print, projection是已定义的媒体类型
媒体查询由 媒体类型 和 一个或多个检测媒体特性的的条件表达式组成。
相对于CSS2只支持对媒体类型进行判断，媒体查询增加了媒体特性的判断，能够更准确地根据设备特性指定专用的样式。

语法逻辑

1
2
3
4
5
6
7
8
9
# 和
and
# 也就是 or 的逻辑
,
# 对查询结果取反
not
# only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，
# 这对于防止让选中的样式在老式浏览器中被应用到。
only

使用

语法

　　媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。

1
2
3
4
5
6
7
8
9
10
11
# link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

# 样式表中的CSS媒体查询
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

使用媒体类型
1
2
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

media 属性定义了应该用于指定每种媒体类型的样式表：
　　screen 适用于计算机彩色屏幕。
　　print 适用于打印预览模式下查看的内容或者打印机打印的内容。
　　作为 CSS v3 规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询 是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。

媒体查询规则

@media all and (min-width: 800px) { ... }
@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型
(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。
请注意:可以省略关键词 all 和 and。在将某个媒体查询应用于所有媒体类型时，会省略all。后面的 and 也是可选的。使用简写语法重新编写媒体查询

简写语法

@media (min-width:800px) { ... }

复杂表达式

创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式
@media (min-width:800px) and (max-width:1200px) { ... }

and 条件

在您的表达式中，您可以根据自己的喜好使用任意数量的 and 条件。如果您想要增加其他条件来检查特定的屏幕方向，只需添加另一个 and 关键词，后跟 orientation 媒体查询.
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
仅在宽度为 800 到 1200 像素且方向是纵向时才能激活.

or 关键词

and 关键词的反义词是 or 关键词。和 and 一样，这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True，那么整个表达式或分离的两个条件都会为 True，如清单 6 所示。
@media (min-width:800px) or (orientation:portrait) { ... }
如果宽度至少是 800 像素或方向是纵向的，则会应用该规则。

使用 not

@media not all and (min-width: 800px) { ... }
@media not (all and (min-width: 800px)) { ... }
当最小宽度不是 800 像素时，会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位，但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位，比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。

only

@media only (min-width: 300px) { ... }

有用的媒体特性

orientation 媒体查询

方向： orientation
值为：横排方向（ landscape）竖排方向（portrait）
@media (orientation: portrait) { ... }
高度和宽度行为十分相似，都支持以 min- 和 max- 为前缀

高度和宽度媒体查询

@media (min-width:800px) and (min-height:400px) { ... }

不带 min- 和 max- 前缀

@media (width:800px) and (height:400px) { ... }

媒体属性特征

1
2
前缀`min-`表示“至少”，即“大于等于”的意思。
前缀`max-`表示“至多”，即“小于等于”的意思。
1
2
3
4
5
6
7
8
9
10
11
12
13
width: 视口宽度
height: 视口高度
device-width: 渲染表面的高度(设备高度)
device-height: 渲染表面的宽度(设备宽度)
orientation: 检测设备是处于横向(landscape)还是纵向(portrait)
aspect-ratio: 基于视口宽度和高度的宽高比
device-aspect-ratio: 基于设备渲染表面的宽度和高度的宽高比
color: 每种颜色的位数
color-index: 设备的颜色索引表中的颜色数
monochrome: 检测单色帧缓冲区中每像素所使用的位数
resoluion: 用来检测屏幕和打印机的分辨率,dpi/dpcm
scan: 电视机的扫描方式,逐行扫描(progressive)或隔行扫描(interlace)
grid: 用来检测输出设备是网格设备还是位图设备

参考：
　　使用 CSS 媒体查询创建响应式网站
　　CSS媒体查询