Cách thực hiện - Truy vấn phương tiện bằng JavaScript
Ví dụ
Nếu khung nhìn nhỏ hơn hoặc bằng 700 pixel, hãy thay đổi màu nền thành màu vàng. Nếu lớn hơn 700 thì đổi thành màu hồng
function myFunction(x) {
if (x.matches) { // If media query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
//
Create a MediaQueryList object
var x = window.matchMedia("(max-width:
700px)")
// Call listener function at run time
myFunction(x);
// Attach listener function on state changes
x.addEventListener("change", function() {
myFunction(x);
});
Hãy tự mình thử »Sử dụng truy vấn phương tiện bằng JavaScript
Truy vấn phương tiện đã được giới thiệu trong CSS3 và là một trong những thành phần chính cho thiết kế web đáp ứng. Truy vấn phương tiện được sử dụng để xác định chiều rộng và chiều cao của khung nhìn nhằm làm cho các trang web trông đẹp mắt trên tất cả các thiết bị (máy tính để bàn, máy tính xách tay, máy tính bảng, điện thoại, v.v.).
Phương thức window.matchMedia() trả về một đối tượng MediaQueryList biểu thị kết quả của chuỗi truy vấn phương tiện CSS đã chỉ định. Giá trị 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.
Tìm hiểu thêm về truy vấn phương tiện trong Hướng dẫn truy vấn phương tiện CSS của chúng tôi
Tìm hiểu thêm về thiết kế đáp ứng trong Hướng dẫn thiết kế web đáp ứng của chúng tôi
Tìm hiểu thêm về phương thức window.matchMedia() trong Tài liệu tham khảo JavaScript của chúng tôi.