Phương thức matchMedia() của Window

Định nghĩa và cách sử dụng

matchMedia() Phương thức trả về MediaQueryList có kết quả truy vấn.

Xin xem thêm:

Đối tượng MediaQueryList

Truy vấn媒体查询

Truy vấn媒体查询 của phương thức matchMedia() có thể là bất kỳ tính năng của quy tắc @media CSS nào, chẳng hạn như min-height, min-width, orientation, v.v.

Mô hình

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

Mô hình

Ví dụ 1

Màn hình/khung nhìn có lớn hơn 700 pixel không:

if (window.matchMedia("(max-width: 700px)").matches) {
  // Độ rộng khung nhìn nhỏ hơn hoặc bằng 700 pixel
}
  // Độ rộng khung nhìn lớn hơn 700 pixel
}

thử trực tiếp

Giải thích ví dụ

Ví dụ này chạy truy vấn媒体查询 và so sánh với trạng thái hiện tại của cửa sổ.

Để chạy các truy vấn媒体查询 khi trạng thái cửa sổ thay đổi, hãy thêm bộ lắng nghe sự kiện vào đối tượng MediaQueryList (xin xem thêm "Các ví dụ khác" bên dưới):

Ví dụ 2

Nếu độ rộng khung nhìn nhỏ hơn hoặc bằng 500 pixel, đặt màu nền là vàng, ngược lại là hồng:

// Tạo hàm match
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // Tạo đối tượng MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)")
// Gọi hàm match trong thời gian chạy:
myFunction(mmObj);
// Thêm hàm match làm bộ lắng nghe thay đổi trạng thái:
mmObj.addListener(myFunction);

thử trực tiếp

cú pháp

window.matchMedia("mediaQuery)

tham số

tham số Mô tả
mediaQuery Bắt buộc. Là chuỗi biểu thị phương tiện.

Giá trị trả về

Loại Mô tả
Đối tượng Đối tượng MediaQueryList có kết quả từ việc kiểm tra phương tiện.

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ