1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: '@media'
slug: Web/CSS/@media
tags:
- '@media'
- '@标签'
- CSS
- 引用
translation_of: Web/CSS/@media
---
<div>{{CSSRef}}</div>
<div><code>@media</code> <a href="https://developer.mozilla.org/en/CSS">CSS</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule">@规则</a> 可用于基于一个或多个 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">媒体查询 </a>的结果来应用样式表的一部分。 使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。</div>
<div></div>
<div class="note">
<div><strong>注：</strong> 在JavaScript中，可以使用{{domxref("CSSMediaRule")}}CSS对象模型接口访问使用@media创建的规则。</div>
</div>
<h2 id="语法">语法</h2>
<p><code>@media</code> 规则可置于您代码的顶层或位于其它任何<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule#条件规则组">@条件规则组</a>内。</p>
<pre class="brush: css no-line-numbers">/* At the top level of your code */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* Nested within another conditional at-rule */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
</pre>
<p><span class="tlid-translation translation" lang="zh-CN"><span title="">有关媒体查询语法的讨论，请参阅<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">使用媒体查询</a>。</span></span></p>
<h3 id="正式语法">正式语法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="媒体特性">媒体特性</h2>
<p>{{page("/zh-CN/docs/Web/Guide/CSS/Media_queries","媒体特性")}}</p>
<h2 id="示例">示例</h2>
<pre class="brush: css">@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-width: 320px)
and (max-width: 480px)
and (resolution: 150dpi) {
body { line-height: 1.4; }
}
</pre>
<p><span class="tlid-translation translation" lang="zh-CN"><span class="alt-edited">媒体查询第4级引入了一种新的范围语法，在测试接受范围的任何特性时允许更简洁的媒体查询，如下面的示例所示：</span></span></p>
<pre class="brush: css">@media (height > 600px) {
body { line-height: 1.4; }
}
@media (400px <= width <= 700px) {
body { line-height: 1.4; }
}
</pre>
<p><span class="tlid-translation translation" lang="zh-CN"><span title="">更多示例，请查看<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">使用媒体查询</a>。</span></span></p>
<h2 id="可访问性">可访问性</h2>
<p>为了最好地调整网站文本大小，当您需要{{cssxref("<length>")}} 进行<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">媒体查询</a>时，请使用<code><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code>。</p>
<p><code><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code>和<code><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">px</a></code>都是有效单位，但如果用户更改浏览器文本大小，<code><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code>的效果会更好。</p>
<p>考虑使用4级媒体查询来改善用户体验。 例如，使用<code>prefers-reduced-motion</code>以<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">检测用户是否已请求系统最小化其使用的动画</a>或动作量。</p>
<h2 id="安全">安全</h2>
<p>由于媒体查询可以洞察用户正在使用的设备的功能（以及扩展的功能和设计），因此有可能滥用它们来构造“指纹”来识别设备，或者至少 将其分类为某些细节，这可能是用户不希望看到的。</p>
<p>由于存在这种潜力，浏览器可能会选择以某种方式捏造返回的值，以防止它们被用来精确地标识计算机。 浏览器可能还会在此区域提供其他措施。 例如，如果启用了Firefox的“抵抗指纹”设置，则许多媒体查询会报告默认值，而不是代表实际设备状态的值。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Comment</th>
<th scope="col">Feedback</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td>
<td>Reinstates <code>light-level</code>, <code>inverted-colors</code> and Custom Media Queries, which were removed from Level 4.<br>
Adds <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, and <code>prefers-color-scheme</code> media features.</td>
<td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
<td>Defines the basic syntax of the <code>@media</code> rule.</td>
<td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
</tr>
<tr>
<td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
<td>
<p>Adds <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
Deprecates all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br>
Makes the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p>
</td>
<td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
<td></td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
<td>Initial definition.</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">在本页的这些有关浏览器的兼容性数据都是由结构数据产生的. 如果你想要提供更多数据, 请访问: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> .向我们发送你的添加请求.</div>
<p>{{Compat("css.at-rules.media")}}</p>
<h2 id="更多资料">更多资料</h2>
<ul>
<li><a class="internal" href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></li>
<li>在 JavaScript里, <code>@media</code> can be可以通过css对象模型接口被调用 .{{domxref("CSSMediaRule")}}.</li>
<li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions#Media_features">Extended Mozilla media features</a></li>
<li><a href="/en-US/docs/Web/CSS/Webkit_Extensions#Media_features">Extended WebKit media features</a></li>
</ul>
|
