MediaQueryListEvent.matches
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Thuộc tính chỉ đọc matches của giao diện MediaQueryListEvent là giá trị boolean true nếu document hiện khớp với danh sách media query, hoặc false nếu không.
Giá trị
Giá trị boolean; trả về true nếu document hiện khớp với danh sách media query, false nếu không.
Ví dụ
js
const mql = window.matchMedia("(max-width: 600px)");
function screenTest(e) {
if (e.matches) {
// Media query khớp với (max-width: 600px)
document.body.style.backgroundColor = "red";
} else {
// Media query không khớp
document.body.style.backgroundColor = "blue";
}
}
mql.addEventListener("change", screenTest);
Thông số kỹ thuật
| Specification |
|---|
| CSSOM View Module # dom-mediaquerylistevent-matches |