CSS参考手册

媒体查询 | Media Queries

@媒体 | @media

@media CSSat-rule可以根据一个或多个媒体查询的结果来应用样式，这些查询会测试设备的类型、特定特征和环境。

在CSS中，@media规则可以放在代码的顶层，也可以嵌套在任何其他条件组。=(conditional group at-rule.)

/* Media query */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested media query */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

除了在@media规则中应用时，媒体查询也可以应用于HTML。<link>元素将整个样式表限制为特定媒体。

<!-- Media-dependent style sheet included in HTML -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" />

注：在JavaScript中，@media可以通过CSSMediaRuleCSS对象模型接口。

语法

@media at-rule由一个或多个媒体查询组成，每个查询都包含一个可选的媒体类型和任意数量的媒体特征表达式。可以通过使用逻辑运算符以各种方式组合多个查询，而且不区分大小写。

只有当媒体查询计算为true时，即当指定的媒体类型与显示在其上的设备类型匹配时，才会应用相应的样式。以及当所有媒体功能表达式都计算为真时，同上。

涉及未知媒体类型的查询总是错误的。

注：即使查询返回false，带有媒体查询的样式表<link>标签仍将下载。不过，除非查询结果更改为true，否则它的内容将不适用。

媒体类型

媒体类型 描述设备的一般类别。除非您使用not或only逻辑运算符，媒体类型是可选的，all类型将被隐藏。

all适用于所有设备。print用于分页材料和在打印预览模式下在屏幕上查看的文档。请参阅传呼媒体，以及入门教程的媒体部分有关特定于分页媒体的格式化问题的信息。screen主要用于彩色电脑屏幕。speech用于语音合成器。

已弃用的媒体类型: CSS2.1和 Media Queries 3定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, and aural)，但它们在Media Queries 4中被弃用，不应该被使用。aural型已经被speech型取代，这是相似的。

媒体特征

媒体特征表达式的特定特性的测试用户代理、输出设备或环境。它们完全是可选的。每个媒体特性表达式必须被括号包围。

Name	Summary	Notes
width	Width of the viewport
height	Height of the viewport
aspect-ratio	Width-to-height aspect ratio of the viewport
orientation	Orientation of the viewport
resolution	Pixel density of the output device
scan	Scanning process of the output device
grid	Does the device use a grid or bitmap screen?
update	How frequently the output device can modify the appearance of content	Added in Media Queries Level 4.
overflow-block	How does the output device handle content that overflows the viewport along the block axis?	Added in Media Queries Level 4.
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled?	Added in Media Queries Level 4.
color	Number of bits per color component of the output device, or zero if the device isn't color
color-gamut	Approximate range of colors that are supported by the user agent and output device	Added in Media Queries Level 4.
color-index	Number of entries in the output device's color lookup table, or zero if the device does not use such a table
display-mode	The display mode of the application, as specified in the web app manifest's display member	Defined in the Web App Manifest spec.
monochrome	Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome
inverted-colors	Is the user agent or underlying OS inverting colors?	Deferred to Media Queries Level 5.
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4.
hover	Does the primary input mechanism allow the user to hover over elements?	Added in Media Queries Level 4.
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4.
any-hover	Does any available input mechanism allow the user to hover over elements?	Added in Media Queries Level 4.
light-level	Light level of the environment	Deferred to Media Queries Level 5.
scripting	Is scripting (e.g., JavaScript) available?	Deferred to Media Queries Level 5.
device-width	Width of the rendering surface of the output device	Deprecated in Media Queries Level 4.
device-height	Height of the rendering surface of the output device	Deprecated in Media Queries Level 4.
device-aspect-ratio	Width-to-height aspect ratio of the output device	Deprecated in Media Queries Level 4.

逻辑运算符

逻辑运算符not、and，和only可用于编写复杂的媒体查询。您还可以使用逗号分隔的列表将多个媒体查询组合成一个规则。

`and`

and 运算符用于将多个媒体特性组合到一个单独的媒体查询中，要求每个链接的特性返回true，以便查询为真。它还被用于加入媒体类型的媒体功能。

`not`

not运算符用于否定媒体查询，如果查询不返回false，则返回true。如果出现在逗号分隔的列表中，它只会否定应用它的特定查询。如果使用not运算符，则必须指定显式媒体类型。

注：not关键字不能用于否定单个功能表达式，仅用于整个媒体查询。

`only`

only运算符 仅用于整个查询匹配应用样式，并且对防止旧的浏览器应用从选定的样式很有用。如果使用not运算符，则必须指定显式媒体类型。

逗号分隔列表

逗号分隔的媒体查询列表中的每个查询，都与其他查询分开处理。如果列表中的任何查询为真，则整个媒体语句返回true。换句话说，列表的行为就像逻辑运算符or。

形式语法

@media <media-query-list> {
  <group-rule-body>
}where 
<media-query-list> = <media-query>#
where 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where 
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>
where 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>
where 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
where 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
where 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

实例

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

有关更多媒体特性示例，请参见每个特定功能的参考页面。有关更多逻辑运算符示例，请参见使用媒体查询...

规范

Specification	Status	Comment
CSS Conditional Rules Module Level 3The definition of '@media' in that specification.	Candidate Recommendation	Defines the basic syntax of the @media rule.
Media Queries Level 4The definition of '@media' in that specification.	Working Draft	Adds scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features. Deprecates all media types except for screen, print, speech, and all. Makes the syntax more flexible by adding, among other things, the or keyword.
Media QueriesThe definition of '@media' in that specification.	Recommendation	No change.
CSS Level 2 (Revision 1)The definition of '@media' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support (all, print, screen media types)	1.0	(Yes)	1.0 (1.7 or earlier)	6.0	9.2	1.3
speech media type	No support	No support	No support	No support	9.2	No support
Media features	1.0	(Yes)	1.0 (1.7 or earlier)	9.0	9.2	1.3
resolution media feature	29	?	3.5 (1.9.1) 2 8.0 (8.0) 3	?	(Yes)	?
display-mode media feature	?	No support	47 (47)1	?	?	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support (all, print, screen media types)	1.0	(Yes)	1.0 (1.7)	(Yes)	9.0	3.1
speech media type	No support	No support	No support	No support	9.0	No support
Media features	1.0	(Yes)	1.0 (1.7)	(Yes)	9.0	3.1
resolution media feature	?	?	?	?	?	?
display-mode media feature	?	No support	47.0 (47)1	?	?	?

媒体查询 | Media Queries相关

1.比率 \|
2.<分辨率> \|
3.@进口 \| @import
4.@媒体.任何悬停 \| @media.any-hover
5.任何指针 \| @media.any-pointer
6.纵横比 \| @media.aspect-ratio
7.颜色查找 \| @media.color
8.色域 \| @media.color-gamut
9.颜色索引 \| @media.color-index
10.设备纵横比 \| @media.device-aspect-ratio
11.设备高度 \| @media.device-height
12.设备宽度 \| @media.device-width
13.显示模式 \| @media.display-mode
14.网格 \| @media.grid
15.高度 \| @media.height
16.悬停 \| @media.hover
17.反转颜色 \| @media.inverted-colors
18.环境光照水平 \| @media.light-level
19.单色帧缓冲区中每像素的位数 \| @media.monochrome
20.视口的方向 \| @media.orientation
21.沿块轴线溢出初始包含块 \| @media.overflow-block
22.沿着内联轴溢出初始包含块 \| @media.overflow-inline
23.指针 \| @media.pointer
24.像素密度 \| @media.resolution
25.扫描 \| @media.scan
26.脚本 \| @media.scripting
27.修改频率 \| @media.update-frequency
28.宽度 \| @media.width
29.媒体查询 \| Media Queries
30.媒体查询：测试媒体查询 \| Media Queries: Testing media queries
31.媒体查询：使用媒体查询 \| Media Queries: Using media queries

CSS

层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 \| Animations & Transitions
2.背景和边框 \| Backgrounds & Borders
3.基本框模型 \| Basic Box Model
4.基本用户界面 \| Basic User Interface
5.框对齐 \| Box Alignment
6. 级联和继承 \| Cascading & Inheritance
7.颜色 \| Color
8. 合成与混合 \| Compositing & Blending
9.条件和规则 \| Conditional Rules
10.计数器样式 \| Counter Styles
11.设备适配 \| Device Adaptation
12.扩展 \| Extensions
13.滤镜效果 \| Filter Effects
14.灵活的框布局 \| Flexible Box Layout
15.字体 \| Fonts
16.片段模块 \| Fragmentation
17.全屏 API \| Fullscreen API
18. 生成内容 \| Generated Content
19.网格布局 \| Grid Layout
20.图像值 \| Image Values
21.初始线格局 \| Inline Layout
22.列表和计数器 \| Lists & Counters
23.逻辑属性 \| Logical Properties
24.面具 \| Masking
25.媒体查询 \| Media Queries
26.杂项 \| Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 \| Motion Path
30. 多列布局 \| Multi-column Layout
31.命名空间 \| Namespaces
32.项目模型 \| Object Model View
33.网页媒体 \| Paged Media
34.定位布局 \| Positioned Layout
35.伪元素 \| Pseudo-
36.节奏大小 \| Rhythmic Sizing
37. Ruby布局 \| Ruby Layout
38.可缩放矢量图形 \| Scalable Vector Graphics
39.滚动快照 \| Scroll Snap
40.选择 \| Selectors
41.形状 \| Shapes
42.文本 \| Text
43.文字装饰 \| Text Decoration
44.变换 \| Transforms
45.值和单位 \| Values & Units
46.变量 \| Variables
47.写入模型 \| Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility（可见性）
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓（outline）属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float（浮动）
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单