码农教程 - 一技在手,衣食无忧! tools

目录

window matchMedia()

❮上一节 ❮ 窗口对象参考 下一节❯

示例1

屏幕/视口宽度是否大于 700 像素：

if (window.matchMedia("(max-width: 700px)").matches) {
  // Viewport is less or equal to 700 pixels wide
} else {
  // Viewport is greater than 700 pixels wide
}
亲自试一试 »

描述

这个matchMedia()方法返回一个媒体查询列表与查询的结果。

也可以看看：

MediaQueryList 对象

媒体查询

媒体询问matchMedia()方法可以是任何媒体特征CSS @media 规则，如最小高度、最小宽度、方向等。

示例

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

语法

window.matchMedia( mediaQuery)

参数

Parameter Description
mediaQuery Required.
A string representing a media query.

返回值

类型 描述
一个东西 包含媒体查询结果的 MediaQueryList 对象。

示例解释

本页的第一个示例运行媒体查询并将其与当前的窗口状态。

跑步响应式媒体查询每当窗口状态发生变化，向 MediaQueryList 对象添加事件侦听器（请参阅下面的 "More Examples"）：

更多示例

如果视口宽度小于或等于 500 像素，则将背景颜色设置为黄色，否则设置为粉红色：

// Create a match Function
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

// Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 500px)")

// Call the match function at run time
myFunction(mmObj);

// Add the match function as a listener for state changes
mmObj.addEventListener("change", function() {
  myFunction(mmObj);
});
亲自试一试 »

浏览器支持

matchMedia()所有现代浏览器都支持：

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 11


❮上一节 ❮ 窗口对象参考 下一节❯