API MediaQueryList JavaScript

Khóa học đề xuất:

Thuộc tính của MediaQueryList Mục tiêu MediaQueryList

Thuộc tính của MediaQueryList Mục tiêu lưu trữ thông tin từ điều tra truyền thông.Mục tiêu làMục tiêu

Thuộc tính của MediaQueryList Mục tiêu có thể truy cập theo cách sau:

window.matchMedia() hoặc chỉ matchMedia():

Mô hình

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Hãy thử trực tiếp

Xem thêm:

Phương pháp window.matchMedia()

Thuộc tính MediaQueryList

Thuộc tính Mô tả
matches Giá trị boolean. Nếu tài liệu khớp với điều tra, thì truehoặc false.
media Giá trị chuỗi. Điều tra truyền thông (danh sách).

Phương pháp MediaQueryList

Phương pháp Mô tả
addListener() Thêm bộ lắng nghe mới, bộ lắng nghe này sẽ được thực hiện mỗi khi kết quả đánh giá của điều tra truyền thông thay đổi.
removeListener()

Loại bỏ bộ lắng nghe trước đó đã được thêm vào danh sách điều tra truyền thông.

Nếu bộ lắng nghe được chỉ định không có trong danh sách, thì không thực hiện bất kỳ hành động nào.

Điều tra truyền thông

matchMedia() Điều tra truyền thông có thể là Nguyên tắc @media của CSS Bất kỳ đặc tính truyền thông nào, chẳng hạn như min-height, min-width, hướng, v.v.

Mô hình

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

Hãy thử trực tiếp

Loại truyền thông

Giá trị Mô tả
all Mặc định. Được sử dụng cho tất cả các loại thiết bị loại truyền thông.
print Được sử dụng trên máy in.
screen Được sử dụng trên màn hình máy tính, máy tính bảng, điện thoại thông minh, v.v.
speech Máy đọc màn hình để đọc to trang web.

Đặc tính truyền thông

Giá trị Mô tả
any-hover Có bất kỳ cơ chế đầu vào có sẵn nào cho phép người dùng để trỏ chuột trên phần tử không?
(Được thêm vào Media Queries Level 4).
any-pointer Có bất kỳ cơ chế đầu vào có sẵn nào là thiết bị chỉ điểm không? Nếu có, độ chính xác của nó như thế nào?
(Được thêm vào Media Queries Level 4).
aspect-ratio Tỷ lệ rộng cao của khung nhìn.
color Số bit của mỗi thành phần màu của thiết bị đầu ra.
color-gamut Phạm vi màu大致 được hỗ trợ bởi người đại diện người dùng và thiết bị đầu ra
(Được thêm vào Media Queries Level 4)
color-index Số lượng màu mà thiết bị có thể hiển thị.
grid Thiết bị là lưới hay bitmap.
height Chiều cao của khung nhìn.
hover Cơ chế đầu vào chính có cho phép người dùng để trỏ chuột vào phần tử không?
(Được thêm vào Media Queries Level 4)
inverted-colors Trình duyệt hoặc hệ điều hành cơ bản có đảo ngược màu không?
(Được thêm vào Media Queries Level 4).
light-level Cấp độ ánh sáng hiện tại của môi trường (được thêm vào Media Queries Level 4).
max-aspect-ratio Tỷ lệ rộng cao nhất của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
max-color Số bit lớn nhất của mỗi thành phần màu của thiết bị đầu ra.
max-color-index Số lượng màu mà thiết bị có thể hiển thị.
max-height Chiều cao lớn nhất của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
max-monochrome Số bit lớn nhất của mỗi 'màu' trên thiết bị đơn sắc (grayscale).
max-resolution Độ phân giải lớn nhất của thiết bị, sử dụng dpi hoặc dpcm.
max-width Chiều rộng lớn nhất của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
min-aspect-ratio Tỷ lệ rộng cao nhất của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
min-color Số bit tối thiểu của mỗi thành phần màu của thiết bị đầu ra.
min-color-index Số lượng màu mà thiết bị có thể hiển thị.
min-height Chiều cao tối thiểu của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
min-monochrome Số bit tối thiểu của mỗi 'màu' trên thiết bị đơn sắc (grayscale).
min-resolution Độ phân giải tối thiểu của thiết bị, sử dụng dpi hoặc dpcm.
min-width Chiều rộng tối thiểu của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
monochrome Số bit của mỗi 'màu' trên thiết bị đơn sắc (grayscale).
orientation Hướng của khung nhìn (chế độ ngang hoặc dọc).
overflow-block Thiết bị đầu ra xử lý nội dung chảy ra khỏi khung nhìn theo trục-block như thế nào (được thêm vào Media Queries Level 4)?
overflow-inline Có thể cuộn nội dung chảy ra khỏi khung nhìn theo trục-inline không (được thêm vào Media Queries Level 4)?
pointer Chủ yếu là cơ chế đầu vào chỉ điểm thiết bị không? Nếu có, độ chính xác của nó như thế nào?
(Được thêm vào Media Queries Level 4).
resolution Độ phân giải của thiết bị đầu ra, sử dụng dpi hoặc dpcm.
scan Quá trình quét của thiết bị đầu ra.
scripting Có thể sử dụng kịch bản (ví dụ: JavaScript) không? (thêm trong Media Queries Level 4).
update Máy xuất có thể thay đổi外观 của nội dung nhanh như thế nào (thêm trong Media Queries Level 4).
width Chiều rộng khung nhìn.