MediaQueryList: thuộc tính media

Giá trị

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

Ví dụ

Ví dụ này chạy media query (width <= 600px) và hiển thị giá trị thuộc tính media của MediaQueryList kết quả trong một <span>.

JavaScript

let mql = window.matchMedia("(width <= 600px)");

document.querySelector(".mq-value").innerText = mql.media;

Đoạn mã JavaScript truyền media query cần khớp vào matchMedia() để biên dịch, sau đó đặt innerText của <span> thành giá trị thuộc tính media của kết quả.

HTML

<span class="mq-value"></span>

Một <span> để nhận đầu ra.

.mq-value {
  font:
    18px "Arial",
    sans-serif;
  font-weight: bold;
  color: #8888ff;
  padding: 0.4em;
  border: 1px solid #ddddee;
}

Kết quả

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()
• MediaQueryList
• MediaQueryListEvent