---
title: MediaQueryList
slug: Web/API/MediaQueryList
translation_of: Web/API/MediaQueryList
---
<div>{{APIRef("CSSOM View")}}{{SeeCompatTable}}</div>

<p><code>MediaQueryList</code> 物件維護一組針對 {{ domxref("document") }} 的 <a href="/en-US/docs/CSS/Media_queries" style="line-height: 19.0909080505371px;" title="CSS/Media queries">media querie</a> , 並且當 media querie 相對應的文件狀態改變時，觸發註冊的事件處理器通知之。</p>

<p><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 19.0909080505371px;">MediaQueryList</span><span style="line-height: 19.0909080505371px;"> 物件讓我們不用一直定期去偵測，而是直接去觀察文件的狀態變化。</span></p>

<h2 id="Method_overview" name="Method_overview">Method overview</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>void <a href="/en-US/docs/DOM/MediaQueryList#addListener()" title="DOM/MediaQueryList#addListener()">addListener</a>(MediaQueryListListener listener);</code></td>
  </tr>
  <tr>
   <td><code>void <a href="/en-US/docs/DOM/MediaQueryList#removeListener()" title="DOM/MediaQueryList#removeListener()">removeListener</a>(MediaQueryListListener listener);</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Properties" name="Properties">Properties</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Property</td>
   <td class="header">Type</td>
   <td class="header">Description</td>
  </tr>
  <tr>
   <td><code>matches</code></td>
   <td><code>boolean</code></td>
   <td><code>true</code> 當 {{ domxref("document") }} 目前狀態符合 media query list 所維護的條件; 否則 false。 唯獨<strong>。</strong></td>
  </tr>
  <tr>
   <td><code>media</code></td>
   <td><code>DOMString</code></td>
   <td>序列化 (serialized) 的 media query list.</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods" name="Methods">Methods</h2>

<h3 id="addListener()" name="addListener()">addListener()</h3>

<p>添加一個新的事件處理器 (listener)，若 <span style="line-height: 19.0909080505371px;">listener </span>已存在則無作用。</p>

<pre>void addListener(
  MediaQueryListListener listener
);</pre>

<h4 id="Parameter_(for_addListener_method)" name="Parameter_(for_addListener_method)">Parameter (for addListener method)</h4>

<dl>
 <dt><code>listener</code></dt>
 <dd>當 media query 對應的狀態改變時所觸發的事件處理函數 ({{ domxref("MediaQueryListListener") }})。</dd>
</dl>

<h3 id="removeListener()" name="removeListener()">removeListener()</h3>

<p><span style="line-height: 19.0909080505371px;">移除一個事件處理器 (</span><span style="line-height: 19.0909080505371px;">listener)，若 </span><span style="line-height: 19.0909080505371px;">listener 不</span><span style="line-height: 19.0909080505371px;">存在則無作用。</span></p>

<pre>void removeListener(
  MediaQueryListListener listener
);</pre>

<h4 id="Parameter_(for_removeListener_method)" name="Parameter_(for_removeListener_method)">Parameter (for removeListener method)</h4>

<dl>
 <dt><code>listener</code></dt>
 <dd>欲移除的<span style="line-height: 19.0909080505371px;">事件處理函數</span><span style="line-height: 19.0909080505371px;"> ({{ domxref("MediaQueryListListener") }})。</span></dd>
</dl>

<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</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>9</td>
   <td>{{ CompatGeckoDesktop("6.0") }}</td>
   <td>10</td>
   <td>12.1</td>
   <td>5</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>

<h2 id="Specification" name="Specification"> </h2>

<h2 id="Specification" name="Specification">規範標準</h2>

<ul>
 <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" title="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
</ul>

<h2 id="See_also" name="See_also">延伸閱讀</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
 <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
 <li>{{ domxref("window.matchMedia()") }}</li>
 <li>{{ domxref("MediaQueryListListener") }}</li>
</ul>