Cửa sổ matchMedia()
ví dụ 1
Màn hình/khung nhìn có rộng hơn 700 pixel không:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Hãy tự mình thử »Sự miêu tả
Phương thức matchMedia()
trả về MediaQueryList chứa kết quả từ truy vấn.
Xem thêm:
Truy vấn phương tiện truyền thông
Truy vấn phương tiện của phương thức matchMedia()
có thể là bất kỳ tính năng phương tiện nào của quy tắc CSS @media , như chiều cao tối thiểu, chiều rộng tối thiểu, hướng, v.v.
Ví dụ
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Cú pháp
window .matchMedia( mediaQuery )
Thông số
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
Giá trị trả về
Kiểu | Sự miêu tả |
Một đối tượng | Đối tượng MediaQueryList chứa kết quả của truy vấn phương tiện. |
Ví dụ giải thích
Ví dụ đầu tiên trên trang này chạy truy vấn phương tiện và so sánh nó với trạng thái cửa sổ hiện tại .
Để chạy truy vấn phương tiện phản hồi bất cứ khi nào trạng thái cửa sổ thay đổi, hãy thêm trình xử lý sự kiện vào đối tượng MediaQueryList (Xem "Ví dụ khác" bên dưới):
Thêm ví dụ
Nếu khung nhìn rộng ít hơn hoặc bằng 500 pixel, hãy đặt màu nền thành màu vàng, nếu không thì màu hồng:
// Create a match Function
function myFunction(x) {
if
(x.matches) {
document.body.style.backgroundColor =
"yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
//
Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width:
500px)")
// Call the match function at run time
myFunction(mmObj);
// Add the match function as a listener for state changes
mmObj.addEventListener("change", function() {
myFunction(mmObj);
});
Hãy tự mình thử »Hỗ trợ trình duyệt
matchMedia()
được hỗ trợ trong tất cả các trình duyệt hiện đại:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 11 |