MediaQueryList

例項屬性

MediaQueryList 介面繼承了其父介面 EventTarget 的屬性。

matches 只讀

一個布林值，如果 document 當前匹配媒體查詢列表，則返回 true，否則返回 false。

media 只讀

一個表示序列化媒體查詢的字串。

例項方法

MediaQueryList 介面繼承了其父介面 EventTarget 的方法。

addListener() 已棄用

將一個回撥函式新增到 MediaQueryList 中，該回調函式會在媒體查詢狀態（文件是否匹配列表中的媒體查詢）改變時被呼叫。此方法主要用於向後相容；如果可能，您應該改用 addEventListener() 來監聽 change 事件。

removeListener() 已棄用

從 MediaQueryList 的回撥列表中移除指定的監聽器回撥函式。當 MediaQueryList 更改媒體查詢狀態時（即文件在匹配和不匹配 MediaQueryList 中列出的媒體查詢之間切換時），就會呼叫這些回撥函式。此方法已保留用於向後相容；如果可能，您通常應該使用 removeEventListener() 來移除更改通知回撥（這些回撥應該先前已使用 addEventListener() 新增）。

事件

以下事件會傳遞給 MediaQueryList 物件：

change

當媒體查詢針對文件的執行結果發生變化時，會發送給 MediaQueryList。例如，如果媒體查詢是 (width >= 400px)，那麼當文件 視口的寬度變化，並跨過 400px 邊界（無論向哪個方向）時，都會觸發 change 事件。

示例

此示例建立了一個 MediaQueryList，然後設定了一個監聽器來檢測媒體查詢狀態何時改變，並在狀態改變時執行一個自定義函式來改變頁面的外觀。

const para = document.querySelector("p");
const mql = window.matchMedia("(width <= 600px)");

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /* the viewport is more than 600 pixels wide */
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addEventListener("change", screenTest);

您可以在各個屬性和方法頁面找到其他示例。

規範

瀏覽器相容性

另見

• 媒體查詢
• 從程式碼中使用媒體查詢
• window.matchMedia()
• MediaQueryListEvent
• 文章 Window.devicePixelRatio 也有一個有用的示例。