initial commit

11 files changed, 1119 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html
new file mode 100644
index 0000000000..d3f3cd202c
--- /dev/null
+++ b/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html
@@ -0,0 +1,60 @@
+---
+title: '-webkit-device-pixel-ratio'
+slug: Web/CSS/@media/-webkit-device-pixel-ratio
+translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
+---
+<div>{{ CSSRef() }}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>-webkit-device-pixel-ratio</code></strong> 是一个非标准的布尔类型CSS媒体类型，是标准 <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> 媒体类型的一个替代方案.</p>
+
+<p>Its value is the number of device pixels used to represent each <a href="/en-US/docs/Web/CSS/length#Absolute_length_units">CSS <code>px</code></a>. Although the value is a {{cssxref("&lt;number&gt;")}} and thus doesn't syntactically allow units, its implicit unit is <a href="/en-US/docs/Web/CSS/resolution#dppx"><code>dppx</code></a>.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<p><strong><code>-webkit-device-pixel-ratio</code></strong> is a range value meaning the prefixed <strong><code>-webkit-min-device-pixel-ratio</code></strong> and <strong><code>-webkit-max-device-pixel-ratio</code></strong> are also available.</p>
+
+<pre class="brush: css">@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* is equivalent to */
+@media (min-resolution: 2dppx) { ... }
+
+/* And likewise */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* is equivalent to */
+@media (max-resolution: 2dppx) { ... }
+</pre>
+
+<h3 id="Specifications" name="Specifications">Specifications</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Initial standardization</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small lang="en-US">'media query extensions' in that document.</small></a></td>
+   <td>Non-standard unofficial documentation</td>
+   <td>Initial documentation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="See_also" name="See_also">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a></li>
+</ul>
diff --git a/files/zh-cn/web/css/@media/any-hover/index.html b/files/zh-cn/web/css/@media/any-hover/index.html
new file mode 100644
index 0000000000..195b19371b
--- /dev/null
+++ b/files/zh-cn/web/css/@media/any-hover/index.html
@@ -0,0 +1,76 @@
+---
+title: any-hover
+slug: Web/CSS/@media/any-hover
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - 媒体查询
+  - 媒体特性
+translation_of: Web/CSS/@media/any-hover
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>any-hover</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">媒体特性</a> 可以用来测试是否有<em>任意</em>可用的输入机制可以在元素上 hover。</p>
+
+<h2 id="语法">语法</h2>
+
+<p><code>any-hover</code> 使用下面列表的值作为关键字。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>可用的输入机制里没有机制可以方便地 hover，或者不存在定点输入机制。</dd>
+ <dt><code>hover</code></dt>
+ <dd>一个或多个可用的输入机制可以方便地在元素上 hover。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="测试是否有输入机制可以_hover">测试是否有输入机制可以 hover</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;a href="#"&gt;Try hovering over me!&lt;/a&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h4 id="结果">结果</h4>
+
+<p>{{EmbedLiveSample("Testing_whether_input_methods_can_hover")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.any-hover")}}</p>
+
+<h2 id="更多资料">更多资料</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/hover">the <code>hover</code> media feature</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/@media/any-pointer/index.html b/files/zh-cn/web/css/@media/any-pointer/index.html
new file mode 100644
index 0000000000..8d05eb28d4
--- /dev/null
+++ b/files/zh-cn/web/css/@media/any-pointer/index.html
@@ -0,0 +1,108 @@
+---
+title: any-pointer
+slug: Web/CSS/@media/any-pointer
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - 媒体查询
+  - 媒体特性
+translation_of: Web/CSS/@media/any-pointer
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>any-pointer</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">媒体特性</a> 测试用户是否拥有<em>任意</em>定点装置（如鼠标）。以及如果存在定点装置，它的精确度是什么样的。</p>
+
+<div class="note">
+<p><strong>注:</strong> 如果你想测试<em>主</em>定点设备的精确度, 使用 <code><a href="/en-US/docs/Web/CSS/@media/pointer">pointer</a></code> 。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<p><code>any-pointer</code> 特性使用下面的关键字。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>没有可用的定点设备。</dd>
+ <dt><code>coarse</code></dt>
+ <dd>至少有一个输入途径包含一个精度有限的定点装置。</dd>
+ <dt><code>fine</code></dt>
+ <dd>至少有一个输入途径包含一个精确的定点装置。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注:</strong> 当输入设备拥有不同特性时，可能有多于一个的值被匹配。<code>none</code> 仅当它们都不是定点设备时被匹配。</p>
+</div>
+
+<h2 id="示例">示例</h2>
+
+<p>这个例子为拥有至少一个精确定点装置的用户创建了一个小 checkbox，为拥有至少一个粗略定点装置的用户创建了一个大 checkbox。大 checkbox 的优先级更高，因为它的声明在小 checkbox 的声明后。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Look at me!&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.any-pointer")}}</p>
+
+<h2 id="更多资料">更多资料</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code> media feature</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/@media/aspect-ratio/index.html b/files/zh-cn/web/css/@media/aspect-ratio/index.html
new file mode 100644
index 0000000000..d18fb02b2b
--- /dev/null
+++ b/files/zh-cn/web/css/@media/aspect-ratio/index.html
@@ -0,0 +1,120 @@
+---
+title: aspect-ratio
+slug: Web/CSS/@media/aspect-ratio
+translation_of: Web/CSS/@media/aspect-ratio
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>aspect-ratio</code></strong> <a href="/zh-CN/docs/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">媒体属性</a> 可以用来测试 {{glossary("viewport")}} 的宽高比。</p>
+
+<h2 id="语法">语法</h2>
+
+<p>宽高比属性被指定为{{cssxref("&lt;ratio&gt;")}}值来代表viewport的宽高比。其为一个范围，这意味着你可以使用<strong><code>min-aspect-ratio</code></strong>和<code><strong>max-aspect-ratio</strong></code>分别查询最小和最大的值。</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的例子包含一个 {{htmlElement("iframe")}} ，拥有它自身的viewport。调整的<code>&lt;iframe&gt;</code>宽高来观察<code>aspect-ratio</code>的变化。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id='inner'&gt;
+  Watch this element as you resize your viewport's width and height.
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">/* 最小宽高比 */
+@media (min-aspect-ratio: 8/5) {
+  div {
+    background: #9af; /* blue */
+  }
+}
+
+/* 最大宽高比 */
+@media (max-aspect-ratio: 3/2) {
+  div {
+    background: #9ff;  /* cyan */
+  }
+}
+
+/* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
+@media (aspect-ratio: 1/1) {
+  div {
+    background: #f9a; /* red */
+  }
+}
+</pre>
+
+<div class="hidden">
+<h2 id="_Example">_Example</h2>
+
+<p>used iframe and DataURL to enable this iframe could resize</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;label id="wf" for="w"&gt;width:165&lt;/label&gt;
+&lt;input id="w" name="w" type="range" min="100" max="250" step="5" value="165"&gt;
+&lt;label id="hf" for="w"&gt;height:165&lt;/label&gt;
+&lt;input id="h" name="h" type="range" min="100" max="250" step="5" value="165"&gt;
+
+&lt;iframe id="outer" src="data:text/html,&lt;style&gt; @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }&lt;/style&gt;&lt;div id='inner'&gt; Watch this element as you resize your viewport's width and height.&lt;/div&gt;"&gt;
+
+&lt;/iframe&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css notranslate">iframe{
+  display:block;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">outer.style.width=outer.style.height="165px"
+
+w.onchange=w.oninput=function(){
+  outer.style.width=w.value+"px"
+  wf.textContent="width:"+w.value
+}
+h.onchange=h.oninput=function(){
+  outer.style.height=h.value+"px"
+  hf.textContent="height:"+h.value
+}</pre>
+</div>
+
+<h3 id="结果">结果</h3>
+
+<div style="overflow: auto;">
+<p>{{ EmbedLiveSample('_Example', '300px', '400px') }}</p>
+</div>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p>
diff --git a/files/zh-cn/web/css/@media/device-height/index.html b/files/zh-cn/web/css/@media/device-height/index.html
new file mode 100644
index 0000000000..284c9a1b41
--- /dev/null
+++ b/files/zh-cn/web/css/@media/device-height/index.html
@@ -0,0 +1,52 @@
+---
+title: device-height
+slug: Web/CSS/@media/device-height
+translation_of: Web/CSS/@media/device-height
+---
+<div>{{cssref}} {{deprecated_header}}</div>
+
+<p> <strong><code>device-height</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> 可以用来测试设备的渲染高度。注意，该条媒体查询将会在 媒体查询level4（目前处于候选草案）中废弃</p>
+
+<h2 id="语法">语法</h2>
+
+<p><code>device-height</code> feature is specified as a {{cssxref("&lt;length&gt;")}} value. It is a range feature, meaning that you can also use the prefixed <strong><code>min-device-height</code></strong> and <code><strong>max-device-height</strong></code> variants to query minimum and maximum values, respectively.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>在高度低于800px时加载指定样式</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /&gt;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Deprecated in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.device-height")}}</p>
+
+<p>
+ <audio style="display: none;"> </audio>
+</p>
diff --git a/files/zh-cn/web/css/@media/hover/index.html b/files/zh-cn/web/css/@media/hover/index.html
new file mode 100644
index 0000000000..14c44ff8f7
--- /dev/null
+++ b/files/zh-cn/web/css/@media/hover/index.html
@@ -0,0 +1,73 @@
+---
+title: hover
+slug: Web/CSS/@media/hover
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - media feature
+translation_of: Web/CSS/@media/hover
+---
+<div>{{cssref}}</div>
+
+<p>该<strong><code>hover</code></strong> <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} 可以根据用户的主要输入机制是否可以悬停在元素之上来应用样式。</p>
+
+<h2 id="语法">语法</h2>
+
+<p>悬停功能指定为从下面列表中选择的关键字值。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>主要输入机制无法悬停或不方便悬停（例如，当用户执行不方便的长按操作时，许多移动设备模拟悬停），或者没有主指示输入机制。</dd>
+ <dt><code>hover</code></dt>
+ <dd>主要输入机制可以方便地悬停在元素上。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Try hovering over me!&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.hover")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/any-hover">the <code>any-hover</code> media feature</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/@media/index.html b/files/zh-cn/web/css/@media/index.html
new file mode 100644
index 0000000000..90a976dd6f
--- /dev/null
+++ b/files/zh-cn/web/css/@media/index.html
@@ -0,0 +1,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 &gt; 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px &lt;= width &lt;= 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("&lt;length&gt;")}} 进行<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>
diff --git a/files/zh-cn/web/css/@media/orientation/index.html b/files/zh-cn/web/css/@media/orientation/index.html
new file mode 100644
index 0000000000..d55e57ccb2
--- /dev/null
+++ b/files/zh-cn/web/css/@media/orientation/index.html
@@ -0,0 +1,94 @@
+---
+title: orientation
+slug: Web/CSS/@media/orientation
+tags:
+  - '@media'
+  - CSS
+  - 参考
+translation_of: Web/CSS/@media/orientation
+---
+<div>{{cssref}}</div>
+
+<p><a href="/zh-CN/docs/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">媒体属性</a><strong>屏幕方向</strong>（<strong><code>orientation</code></strong>）可用于测试视口 {{glossary("viewport")}}（或者对于<a href="/zh-CN/docs/Web/CSS/Paged_media">分页媒体</a>而言的页面框盒）的横纵方向。</p>
+
+<div class="note">
+<p><strong>注意：</strong>此属性不等价于<span class="syntaxbox"><em>设备</em></span>的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<p><code>orientation</code> 属性被指定为下列关键字值中的任意一个。</p>
+
+<h3 id="关键字值">关键字值</h3>
+
+<dl>
+ <dt><code>portrait</code></dt>
+ <dd>viewport 处于纵向，即高度大于等于宽度。</dd>
+ <dt><code>landscape</code></dt>
+ <dd>viewport 处于横向，即宽度大于高度。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Box 1&lt;/div&gt;
+&lt;div&gt;Box 2&lt;/div&gt;
+&lt;div&gt;Box 3&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.orientation")}}</p>
diff --git a/files/zh-cn/web/css/@media/prefers-color-scheme/index.html b/files/zh-cn/web/css/@media/prefers-color-scheme/index.html
new file mode 100644
index 0000000000..cb9c5c422f
--- /dev/null
+++ b/files/zh-cn/web/css/@media/prefers-color-scheme/index.html
@@ -0,0 +1,111 @@
+---
+title: prefers-color-scheme
+slug: Web/CSS/@media/prefers-color-scheme
+tags:
+  - CSS
+  - Web
+  - prefers-color-scheme
+  - 参考
+  - 媒体查询
+translation_of: Web/CSS/@media/prefers-color-scheme
+---
+<p><strong><code>prefers-color-scheme</code></strong> <a href="/zh-CN/docs/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">媒体特性</a>用于检测用户是否有将系统的主题色设置为亮色或者暗色。</p>
+
+<h2 id="语法">语法</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>表示系统未得知用户在这方面的选项。在<a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">布尔值上下文</a>中，其执行结果为 <code>false</code>。</dd>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>表示用户已告知系统他们选择使用浅色主题的界面。</dd>
+ <dt><code><dfn>dark</dfn></code></dt>
+ <dd>表示用户已告知系统他们选择使用暗色主题的界面。</dd>
+</dl>
+
+<div class="standardNoteBlock">
+<p><strong>译者注：</strong>“未得知”、“已告知”等用语，英文原文如此。<br>
+ “未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。<br>
+ “已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。</p>
+
+<p>目前，若结果为 <code>no-preference</code>，无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑，用户或用户代理也可能在一些情况下在浏览器内部将其设置为 <code>no-preference</code>。</p>
+</div>
+
+<h2 id="样例">样例</h2>
+
+<p>这个例子使用了一个有黑色背景和白色文字的元素，当用户使用浅色主题时，会翻转黑白颜色。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="day"&gt;Day (initial)&lt;/div&gt;
+&lt;div class="day light-scheme"&gt;Day (changes in light scheme)&lt;/div&gt;
+&lt;div class="day dark-scheme"&gt;Day (changes in dark scheme)&lt;/div&gt; &lt;br&gt;
+
+&lt;div class="night"&gt;Night (initial)&lt;/div&gt;
+&lt;div class="night light-scheme"&gt;Night (changes in light scheme)&lt;/div&gt;
+&lt;div class="night dark-scheme"&gt;Night (changes in dark scheme)&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</p>
+   </td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Video tutorial: Coding a Dark Mode for your Website</a></li>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li>
+ <li>Changing color schemes in <a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a> and <a href="https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019">Android</a>.</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/zh-CN/docs/Web/CSS/@media/")}}</div>
diff --git a/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html b/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html
new file mode 100644
index 0000000000..49de3de412
--- /dev/null
+++ b/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html
@@ -0,0 +1,137 @@
+---
+title: prefers-reduced-motion
+slug: Web/CSS/@media/prefers-reduced-motion
+translation_of: Web/CSS/@media/prefers-reduced-motion
+---
+<p><a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">媒体查询特性</a> <strong><code>prefers-reduced-motion</code></strong> 用于检测用户的系统是否被开启了动画减弱功能。</p>
+
+<h2 id="语法">语法</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>用户未修改系统动画相关特性。</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。</dd>
+</dl>
+
+<h2 id="用户偏好">用户偏好</h2>
+
+<p>在火狐中，满足以下条件则 <code>reduce</code> 会生效:</p>
+
+<ul>
+ <li>在  GTK/Gnome 中，可以通过 <em>GNOME Tweaks</em> （在“通用”或“外观”菜单中，取决于具体版本） 的配置，设置 <code>gtk-enable-animations</code> 的值为 <code>false</code>。
+
+  <ul>
+   <li>可以在 <a href="https://wiki.archlinux.org/index.php/GTK#Configuration">GTK 3 的配置文件</a>中的 <code>[Settings]</code> 模块下设置 <code>gtk-enable-animations = false</code>。</li>
+  </ul>
+ </li>
+ <li>在 Windows 10 中：设置 &gt; 轻松获取 &gt; 显示 &gt; 在 Windows 中显示动画。</li>
+ <li>在 Windows 7 中：控制面板 &gt; 轻松获取 &gt; ?是计算机更易于查看 &gt; 关闭不必要动画。</li>
+ <li>在 MacOS 中：系统偏好 &gt; 辅助使用 &gt; 显示 &gt; 减少运动。</li>
+ <li>在 iOS 上：设置 &gt; 通用 &gt; 辅助性 &gt; 减少运动。</li>
+ <li>在 Android 9+ 上：设置 &gt; 辅助性 &gt; 移除动画。</li>
+</ul>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的例子将会展示一组令人心烦的动画，不过当你开启了系统的“减少运动”后就能看到动画减弱的效果了。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.animation {
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">.animation {
+  background-color: rebeccapurple;
+  color: #fff;
+  font: 1.2em Helvetica, arial, sans-serif;
+  width: 200px;
+  padding: 1em;
+  border-radius: 1em;
+  text-align: center;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2018-9-2 13:47:0
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation vibrate-1
+ * ----------------------------------------
+ */
+
+@keyframes vibrate {
+  0% {
+            transform: translate(0);
+  }
+  20% {
+            transform: translate(-2px, 2px);
+  }
+  40% {
+            transform: translate(-2px, -2px);
+  }
+  60% {
+            transform: translate(2px, 2px);
+  }
+  80% {
+            transform: translate(2px, -2px);
+  }
+  100% {
+            transform: translate(0);
+  }
+}
+</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("例子")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An introduction to the reduced motion media query</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
diff --git a/files/zh-cn/web/css/@media/width/index.html b/files/zh-cn/web/css/@media/width/index.html
new file mode 100644
index 0000000000..79b6612aac
--- /dev/null
+++ b/files/zh-cn/web/css/@media/width/index.html
@@ -0,0 +1,126 @@
+---
+title: width
+slug: Web/CSS/@media/width
+tags:
+  - '@media'
+  - CSS
+  - NeedsBrowserCompatibility
+  - Reference
+  - media feature
+translation_of: Web/CSS/@media/width
+---
+<div>{{cssref}}</div>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">可以使用</span></font><strong>width</strong></code> <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} 基于{{glossary("viewport")}}宽度(或页面框，用于<a href="/en-US/docs/Web/CSS/Paged_media">paged media</a>)应用样式。</p>
+
+<h2 id="语法"><strong>语法</strong></h2>
+
+<p>该<code>width</code>特性被指定为{{cssxref("&lt;length&gt;")}}，表示viewport宽度的值。这是一个范围特性，也就是说，您也可以使用前缀<strong><code>min-width</code></strong>和<code><strong>max-width</strong></code>分别查询最小值和最大值。</p>
+
+<h2 id="例子"><strong>例子</strong></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;改变viewport的宽度的同时，观察这个元素的变化。&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* 精确宽度 */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小宽度 */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大宽度 */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample('Example','90%')}}</p>
+
+<h2 id="规范"><strong>规范</strong></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>The value can now be negative, in which case it computes to false.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initial definition. The value must be nonnegative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility"><strong>浏览器兼容性</strong></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>