Window：matchMedia() 方法

語法

matchMedia(mediaQueryString)

引數

mediaQueryString

一個指定要解析為 MediaQueryList 的媒體查詢的字串。

就像在 CSS 中一樣，任何 媒體特性都必須放在表示式內的括號中。例如：matchMedia("(width <= 600px)") 或 matchMedia("(orientation: landscape)") 可以正常工作，而 matchMedia("width < 600px") 或 matchMedia("orientation: landscape") 則不行。媒體型別（all、print、screen）的關鍵字以及邏輯運算子（and、or、not、only）不需要放在括號中。

返回值

一個用於媒體查詢的新 MediaQueryList 物件。使用此物件的屬性和事件來檢測匹配項以及隨著時間推移監控這些匹配項的變化。

用法說明

您可以使用返回的媒體查詢來執行即時檢查和事件驅動的檢查，以檢視 document 是否與媒體查詢匹配。

要執行一次性、即時檢查以檢視 document 是否與媒體查詢匹配，請檢視 matches 屬性的值，如果 document 滿足媒體查詢的要求，則該值為 true。

如果您需要隨時瞭解 document 是否與媒體查詢匹配，您可以改為監視 change 事件是否已傳送到該物件。在關於 Window.devicePixelRatio 的文章中 有一個很好的示例。

示例

此示例執行媒體查詢 (width <= 600px)，並在 <span> 中顯示生成的 MediaQueryList 的 matches 屬性的值；因此，如果視口小於或等於 600 畫素寬，輸出將顯示“true”，如果視窗比這更寬，則顯示“false”。

JavaScript

let mql = window.matchMedia("(width <= 600px)");

document.querySelector(".mq-value").innerText = mql.matches;

JavaScript 程式碼將要匹配的媒體查詢傳遞給 matchMedia() 進行編譯，然後將 <span> 的 innerText 設定為結果的 matches 屬性的值，以便在頁面載入時指示 document 是否與媒體查詢匹配。

HTML

<span class="mq-value"></span>

一個簡單的 <span> 用於接收輸出。

.mq-value {
  font:
    18px "Arial",
    sans-serif;
  font-weight: bold;
  color: #8888ff;
  padding: 0.4em;
  border: 1px solid #ddddee;
}

結果

有關其他程式碼示例，請參閱 以程式設計方式測試媒體查詢。

規範

瀏覽器相容性

另見

• 媒體查詢
• 從程式碼中使用媒體查詢
• MediaQueryList