MediaQueryList

Thuộc tính phiên bản

Giao diện MediaQueryList kế thừa các thuộc tính từ giao diện cha, EventTarget.

matches Read only

Một giá trị boolean trả về true nếu document hiện tại khớp với danh sách media query, hoặc false nếu không.

media Read only

Một chuỗi đại diện cho media query đã được tuần tự hóa.

Phương thức phiên bản

Giao diện MediaQueryList kế thừa các phương thức từ giao diện cha, EventTarget.

addListener() Deprecated

Thêm vào MediaQueryList một callback được gọi bất cứ khi nào trạng thái media query, tức là tài liệu có khớp với các media query trong danh sách hay không, thay đổi. Phương thức này tồn tại chủ yếu để tương thích ngược; nếu có thể, bạn nên dùng addEventListener() để theo dõi sự kiện change.

removeListener() Deprecated

Xóa callback trình lắng nghe được chỉ định khỏi các callback được gọi khi MediaQueryList thay đổi trạng thái media query, điều này xảy ra bất cứ khi nào tài liệu chuyển đổi giữa khớp và không khớp với các media query được liệt kê trong MediaQueryList. Phương thức này được giữ lại cho tương thích ngược; nếu có thể, bạn thường nên dùng removeEventListener() để xóa các callback thông báo thay đổi (đã được thêm vào trước đó bằng addEventListener()).

Sự kiện

Các sự kiện sau đây được gửi đến các đối tượng MediaQueryList:

change

Được gửi đến MediaQueryList khi kết quả chạy media query so với tài liệu thay đổi. Ví dụ, nếu media query là (width >= 400px), sự kiện change được kích hoạt bất cứ khi nào chiều rộng của viewport của tài liệu thay đổi sao cho chiều rộng của nó vượt qua ranh giới 400px theo cả hai hướng.

Ví dụ

Ví dụ này tạo ra MediaQueryList và sau đó thiết lập trình lắng nghe để phát hiện khi trạng thái media query thay đổi, chạy hàm tùy chỉnh khi thay đổi đó xảy ra để thay đổi giao diện của trang.

const para = document.querySelector("p");
const mql = window.matchMedia("(width <= 600px)");

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /* the viewport is more than 600 pixels wide */
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addEventListener("change", screenTest);

Bạn có thể tìm thấy các ví dụ khác trên các trang thuộc tính và phương thức riêng lẻ.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Media query
• Sử dụng media query từ code
• window.matchMedia()
• MediaQueryListEvent
• Bài viết Window.devicePixelRatio cũng có ví dụ hữu ích