blob: 48abe41c6a082f009150dcb404fc11dd715884d0 (
plain)
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
|
---
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><span></code>的{{domxref("HTMLElement.innerText", "innerText")}}为{{domxref("MediaQueryList.media", "matches")}}属性结果的值，以便它表明此document在此刻页面加载完成时是否与媒体查询所匹配。</p>
<h3 id="HTML">HTML</h3>
<pre><span class="mq-value"></span></pre>
<p>一个简单的 <code><span></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>
|
