MediaQueryListEvent：matches 屬性
matches 是 MediaQueryListEvent 介面的一個只讀屬性，它是一個布林值：如果 document 當前匹配媒體查詢列表，則為 true；如果不匹配，則為 false。
值
一個布林值；如果 document 當前匹配媒體查詢列表，則返回 true，否則返回 false。
示例
js
const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(width <= 600px)");
mql.addEventListener("change", (event) => {
if (event.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";
}
});
規範
| 規範 |
|---|
| CSSOM 檢視模組 # dom-mediaquerylistevent-matches |
瀏覽器相容性
載入中…