Cách thực hiện - Truy vấn phương tiện với JavaScript
Thí dụ
Nếu chế độ xem có chiều rộng 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 nó lớn hơn 700, hãy đổi nó 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";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Sử dụng truy vấn phương tiện với 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 quan trọng để 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 chế độ xem nhằm làm cho trang web trông đẹp 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 đại diện cho kết quả của chuỗi truy vấn phương tiện CSS được chỉ định. Giá trị của phương thức matchMedia () có thể là bất kỳ tính năng đa 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 thích ứ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.