Window matchMedia() 方法

定義和用法

matchMedia() 方法返回帶有查詢結果的 MediaQueryList。

另請參閱：

MediaQueryList 對象

媒體查詢

matchMedia() 方法的媒體查詢可以是 CSS @media 規則的任何媒體特性，例如 min-height、min-width、orientation 等。

實例

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

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

實例

例子 1

屏幕/視口是否大于 700 像素寬：

if (window.matchMedia("(max-width: 700px)").matches) {
  // 視口寬度小于或等于 700 像素
} else {
  // 視口寬度大于 700 像素
}

親自試一試

例子解釋

本例運行媒體查詢并將其與當前窗口狀態進行比較。

如需在窗口狀態更改時運行響應式媒體查詢，請將事件偵聽器添加到 MediaQueryList 對象（請參閱下方“更多實例”）：

例子 2

如果視口小于或等于 500 像素寬，則將背景顏色設置為黃色，否則設置為粉紅色：

// 創建匹配函數
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// // 創建 MediaQueryList 對象
const mmObj = window.matchMedia("(max-width: 700px)")
// 在運行時調用 match 函數：
myFunction(mmObj);
// 添加 match 函數作為狀態變化的監聽器：
mmObj.addListener(myFunction);

親自試一試

語法

window.matchMedia(mediaQuery)

參數

參數 描述
mediaQuery 必需。表示媒體查詢的字符串。

返回值

類型 描述
對象 帶有媒體查詢結果的 MediaQueryList 對象。

瀏覽器支持

所有瀏覽器都支持 matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 11 支持 支持 支持 支持