如何使用 JavaScript 進行媒體查詢

使用 JavaScript 進行媒體查詢

媒體查詢在 CSS3 中引入，是響應式 Web 設計的關鍵要素之一。媒體查詢用于確定視口的寬度和高度，以使網頁在所有設備（臺式機、筆記本電腦、平板電腦、手機等）上都顯示得很好。

window.matchMedia() 方法返回一個 MediaQueryList 對象，該對象表示指定的 CSS 媒體查詢字符串的結果。matchMedia() 方法的值可以是 CSS @media 規則的任何媒體特征，例如 min-height、min-width、orientation 等。

實例

如果視口的寬度小于或等于700像素，則將背景色更改為黃色。如果寬度大于700，則將其更改為粉紅色：

function myFunction(x) {
  if (x.matches) { // 如果媒體查詢匹配If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// 創建 MediaQueryList 對象
var x = window.matchMedia("(max-width: 700px)")
// 在運行時調用監聽器函數
myFunction(x);
// 在狀態更改時附加監聽器函數
x.addEventListener("change", function() {
  myFunction(x);
});

親自試一試

相關頁面

教程：CSS 媒體查詢

教程：響應式網頁設計

參考手冊：JavaScript window.matchMedia() 方法