Testing media queries programmatically

Tạo danh sách media query

Trước khi bạn có thể đánh giá kết quả của một media query, bạn cần tạo đối tượng MediaQueryList đại diện cho query. Để làm điều này, sử dụng phương thức window.matchMedia.

Ví dụ, để thiết lập một danh sách query xác định xem thiết bị ở chế độ ngang hay dọc orientation:

const mediaQueryList = window.matchMedia("(orientation: portrait)");

Kiểm tra kết quả của một query

Sau khi bạn đã tạo danh sách media query, bạn có thể kiểm tra kết quả của query bằng cách xem giá trị của thuộc tính matches của nó:

if (mediaQueryList.matches) {
  /* The viewport is currently in portrait orientation */
} else {
  /* The viewport is not currently in portrait orientation, therefore landscape */
}

Nhận thông báo query

Nếu bạn cần biết về các thay đổi đối với kết quả đã đánh giá của query một cách liên tục, sẽ hiệu quả hơn khi đăng ký một listener thay vì thăm dò kết quả của query. Để làm điều này, gọi phương thức addEventListener() trên đối tượng MediaQueryList, với một hàm callback để gọi khi trạng thái media query thay đổi (ví dụ: khi bài kiểm tra media query chuyển từ true sang false):

// Create the query list.
const mediaQueryList = window.matchMedia("(orientation: portrait)");

// Define a callback function for the event listener.
function handleOrientationChange(mql) {
  // …
}

// Run the orientation change handler once.
handleOrientationChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener("change", handleOrientationChange);

Đoạn code này tạo danh sách media query kiểm tra orientation và thêm event listener vào nó. Sau khi xác định listener, chúng ta cũng gọi listener trực tiếp. Điều này làm cho listener của chúng ta thực hiện các điều chỉnh dựa trên orientation thiết bị hiện tại; nếu không, code của chúng ta có thể giả định thiết bị ở chế độ dọc lúc khởi động, ngay cả khi thực tế ở chế độ ngang.

Hàm handleOrientationChange() sẽ xem xét kết quả của query và xử lý bất cứ điều gì chúng ta cần làm khi orientation thay đổi:

function handleOrientationChange(evt) {
  if (evt.matches) {
    /* The viewport is currently in portrait orientation */
  } else {
    /* The viewport is currently in landscape orientation */
  }
}

Ở trên, chúng ta xác định tham số là evt — một đối tượng sự kiện kiểu MediaQueryListEvent cũng bao gồm các thuộc tính media và matches, vì vậy bạn có thể truy vấn các tính năng này của MediaQueryList bằng cách truy cập trực tiếp hoặc truy cập đối tượng sự kiện.

Kết thúc thông báo query

Để ngừng nhận thông báo về các thay đổi đối với giá trị của media query, gọi removeEventListener() trên MediaQueryList, truyền vào tên của hàm callback đã được xác định trước đó:

mediaQueryList.removeEventListener("change", handleOrientationChange);

Đặc tả

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

Xem thêm

• Media queries
• Module CSS media queries
• Module CSS object model
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent