Cách sử dụng kiểm tra truyền thông bằng JavaScript

Sử dụng kiểm tra truyền thông bằng JavaScript

Kiểm tra truyền thông được giới thiệu trong CSS3, là một yếu tố quan trọng của thiết kế web响应. Kiểm tra truyền thông được sử dụng để xác định độ rộng và độ cao của khung nhìn, để trang web hiển thị tố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 di động, v.v.).

window.matchMedia() phương thức trả về một đối tượng MediaQueryList, biểu thị kết quả của chuỗi kiểm tra truyền thông CSS được chỉ định.matchMedia() giá trị của phương thức có thể là CSS @media mỗi đặc điểm truyền thông trong quy tắc, chẳng hạn như min-height、min-width、hướng v.v.

Mẫu

Nếu độ rộng của khung nhìn nhỏ hơn hoặc bằng 700 pixel, hãy thay đổi màu nền thành vàng. Nếu độ rộng lớn hơn 700, hãy thay đổi thành hồng:

function myFunction(x) {
  if (x.matches) { // Nếu điều kiện kiểm tra truyền thông khớp
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Tạo đối tượng MediaQueryList
var x = window.matchMedia("(max-width: 700px)")
// Gọi hàm theo dõi trong thời gian chạy
myFunction(x);
// Thêm hàm theo dõi khi trạng thái thay đổi
x.addEventListener("change", function() {
  myFunction(x);
});

Thử ngay

Trang liên quan

Hướng dẫn:Truy vấn tìm kiếm CSS

Hướng dẫn:Thiết kế trang web响应

Tài liệu tham khảo:Phương thức JavaScript window.matchMedia()