initial commit

1 files changed, 102 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/window/matchmedia/index.html b/files/zh-cn/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..48abe41c6a
--- /dev/null
+++ b/files/zh-cn/web/api/window/matchmedia/index.html
@@ -0,0 +1,102 @@
+---
+title: Window.matchMedia()
+slug: Web/API/Window/matchMedia
+translation_of: Web/API/Window/matchMedia
+---
+<p>{{APIRef}}</p>
+
+<p>{{domxref("Window")}} 的<code><strong>matchMedia()</strong></code> 方法返回一个新的{{domxref("MediaQueryList")}} 对象，表示指定的<a href="/zh-CN/docs/CSS/Media_queries" title="CSS/Media queries">媒体查询</a>字符串解析后的结果。返回的<code>MediaQueryList</code> 可被用于判定{{domxref("Document")}}是否匹配媒体查询，或者监控一个<code>document</code> 来判定它匹配了或者停止匹配了此媒体查询。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre><em>mqList </em>= window.matchMedia(<em>mediaQueryString</em>)
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>mediaQueryString</code></dt>
+ <dd>一个被用于媒体查询解析的字符串。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个用来媒体查询的新的{{domxref("MediaQueryList")}}对象</p>
+
+<h2 id="使用说明">使用说明</h2>
+
+<p>您可以使用返回的媒体查询来执行即时检查和事件驱动检查，以查看文档是否与媒体查询匹配。</p>
+
+<p>要执行一次瞬时检查以查看文档是否与媒体查询匹配，请查看{{domxref("MediaQueryList.matches", "matches")}}属性的值，当document满足媒体查询条件的时候将会返回<code>true</code>。</p>
+
+<p>如果您需要始终了解document是否与媒体查询匹配，则可以查看将要传递给对象的{{domxref("MediaQueryList.change_event", "change")}} 事件 。{{domxref("Window.devicePixelRatio")}}上的文章中有一个很好的例子。</p>
+
+<h2 id="Example" name="Example">举例</h2>
+
+<p>此示例运行媒体查询<code>(max-width: 600px)</code>并在{{HTMLElement("span")}};中显示<code>MediaQueryList</code>的<code>matches</code>属性值。如果视口的宽度小于或等于600像素，则输出将为true，而如果窗口的宽度大于此宽度，则将输出false。</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre>let mql = window.matchMedia('(max-width: 600px)');
+
+document.querySelector(".mq-value").innerText = mql.matches;
+</pre>
+
+<p>JavaScript代码只需将要匹配的媒体查询字符串传递到{{domxref("Window.matchMedia", "matchMedia()")}}进行编译，然后设置<code>&lt;span&gt;</code>的{{domxref("HTMLElement.innerText", "innerText")}}为{{domxref("MediaQueryList.media", "matches")}}属性结果的值，以便它表明此document在此刻页面加载完成时是否与媒体查询所匹配。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;span class="mq-value"&gt;&lt;/span&gt;</pre>
+
+<p>一个简单的 <code>&lt;span&gt;</code> 来接收输出。</p>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre>.mq-value {
+  font: 18px arial, sans-serif;
+  font-weight: bold;
+  color: #88f;
+  padding: 0.4em;
+  border: 1px solid #dde;
+}
+</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "60")}}</p>
+
+<p>参考更多的例子来 <a href="/zh-CN/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">通过代码使用媒体查询</a> 。</p>
+
+<h2 id="规范">规范</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器通用性</h2>
+
+<p>{{Compat("api.Window.matchMedia")}}</p>
+
+<h2 id="See_also" name="See_also"><span class="op_dict_text2">请参阅</span></h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/CSS/Media_queries" title="CSS/Media queries">媒体查询</a></li>
+ <li><a href="/zh-CN/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">通过代码使用媒体查询</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>