MediaQueryList: media 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

MediaQueryList 介面的media 只讀屬性是一個表示序列化媒體查詢的字串。

值

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

此示例執行媒體查詢 (width <= 600px)，並在一個 <span> 中顯示生成的 MediaQueryList 的 media 屬性的值。

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

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

JavaScript 程式碼將要匹配的媒體查詢傳遞給 matchMedia() 以進行編譯，然後將 <span> 的 innerText 設定為結果的 media 屬性值。

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;
}

規範
CSSOM 檢視模組 # dom-mediaquerylist-media

此頁面最後修改於 2025 年 10 月 13 日，由 MDN 貢獻者修改。