Window 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
}
Định nghĩa và Cách sử dụng
Phương matchMedia()thức trả về một MediaQueryList với kết quả từ truy vấn.
Xem thêm:
Truy vấn phương tiện truyền thông
Các truy vấn phương tiện của matchMedia()phương thức 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.
Các 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ả lại
| Loại | Sự miêu tả |
| Một đối tượng | Một đối tượng MediaQueryList với kết quả của truy vấn phương tiện. |
Giải thích ví dụ
Ví dụ đầu tiên trên trang này chạy một 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 đáp ứng 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):
Các ví dụ khác
Nếu chế độ xem có chiều rộng nhỏ hơn hoặc bằng 500 pixel, hãy đặt màu nền thành màu vàng, ngược lại là 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: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Hỗ trợ trình duyệt
matchMedia() được hỗ trợ trong tất cả các trình duyệt hiện đại:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |