MediaQueryList

實例屬性

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

matches Read only

一個布林值，如果 document 目前符合媒體查詢列表，則回傳 true，否則回傳 false。

media Read only

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

實例方法

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

addListener() 已棄用

新增一個回呼函式到 MediaQueryList，每當媒體查詢狀態——也就是文件是否符合列表中的媒體查詢——改變時，該回呼函式就會被調用。這個方法主要是為了向後相容而存在；如果可能，你應該改用 addEventListener() 來監聽 change 事件。

removeListener() 已棄用

從 MediaQueryList 的媒體查詢狀態改變（狀態改變發生在文件在符合與不符合 MediaQueryList 中所列媒體查詢之間切換的任何時候）時要調用的回呼函式中，移除指定的監聽器回呼函式。這個方法是為了向後相容而保留的；如果可能，你通常應該使用 removeEventListener() 來移除變更通知的回呼函式（這些回呼函式應該是先前使用 addEventListener() 新增的）。

事件

下列事件會傳遞至 MediaQueryList 物件：

change

當對文件執行媒體查詢的結果改變時，會傳送至 MediaQueryList。例如，如果媒體查詢是 (width >= 400px)，那麼每當文件視區的寬度改變，以致其寬度向任一方向跨越 400px 的邊界時，change 事件就會被觸發。

範例

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

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

function screenTest(e) {
  if (e.matches) {
    /* 視區寬度為 600 像素或更小 */
    para.textContent = "這是一個窄螢幕——寬度小於 600px。";
    document.body.style.backgroundColor = "red";
  } else {
    /* 視區寬度大於 600 像素 */
    para.textContent = "這是一個寬螢幕——寬度大於 600px。";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addEventListener("change", screenTest);

你可以在各個屬性和方法的頁面中找到其他範例。

規範

瀏覽器相容性

參見

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