Window matchMedia() 方法

matchMedia()方法返回一個新的MediaQueryList對象，該對象表示指定媒體查詢字符串的解析結(jié)果。

matchMedia()方法的值可以是CSS @media規(guī)則的任何媒體功能，例如min-height，min-width，orientation等。

語法：

window.matchMedia(mediaQueryString)

示例

if (window.matchMedia("(min-width: 500px)").matches) {
   /* 視口viewport最小為500像素寬 */
} else {
   /* 視口viewport寬度小于500像素 */
}

測試看看?/?

瀏覽器兼容性

表格中的數(shù)字指定了完全支持matchMedia()方法的第一個瀏覽器版本：

方法
matchMedia()	9	6	12.1	5.1	10

參數(shù)值

參數(shù)	描述
mediaQueryString	一個字符串，表示要為其返回新的MediaQueryList對象的媒體查詢

技術(shù)細節(jié)

返回值：	一個MediaQueryList對象，表示指定CSS媒體查詢字符串的結(jié)果

更多實例

如果視口寬度小于或等于600像素，則背景色為珊瑚色。如果大于600，它將變?yōu)闇\綠色：

示例

var size = window.matchMedia("(max-width: 600px)")
myFunc(size) // 在運行時調(diào)用監(jiān)聽器函數(shù)
size.addListener(myFunc) // 在狀態(tài)更改時附加監(jiān)聽器函數(shù)

function myFunc(size) {
  if (size.matches) {
 document.body.style.backgroundColor = "coral";
  } else {
 document.body.style.backgroundColor = "lightgreen";
  }
}

測試看看?/?

JavaScript 對象

JavaScript 參考手冊

JS DOM參考手冊

Window matchMedia() 方法

語法：

瀏覽器兼容性

參數(shù)值

技術(shù)細節(jié)

更多實例

相關(guān)參考