Window matchMedia() 方法

实例

查看屏幕/视口的宽度是否小于或大于 700 像素:

<!DOCTYPE html>
<html>
<body>
<p>点击按钮查看 屏幕/视口 的宽度是否小于或大于 700 像素</p>
<button onclick="myFunction()">试一试</button>
<p id="demo">
<script>
function myFunction() {
  var x = document.getElementById("demo");
  if (window.matchMedia("(max-width: 700px)").matches) {
    x.innerHTML = "屏幕宽度小于或等于 700 像素。";
  } else {
    x.innerHTML = "屏幕至少有 700 像素宽。";
  }
}
</script>
</body>
</html>

运行一下

定义与用法

window.matchMedia() 方法返回一个 MediaQueryList 对象，该对象表示指定 CSS 媒体查询（CSS media query）字符串的结果。

matchMedia（）方法的值可以是 CSS ©媒体规则的任何媒体功能，如最小高度、最小宽度、方向等。

MediaQueryList 对象有两个属性和方法:

属性	描述
matches	用于检查查询结果。返回布尔值：如果文档与媒体查询列表匹配，则返回 true，否则返回 false
media	一个字符串，表示序列化媒体查询列表

此页面上的第一个示例仅运行指定的 CSS 媒体查询，并将其与当前窗口状态进行一次比较。使用 window.matchMedia() 以响应的方式，使您的代码在窗口状态更改时对 CSS 媒体查询作出反应，可以使用其方法/事件处理程序:

方法	描述
addListener(functionref)	添加新的监听函数，该函数在媒体查询的计算结果更改时执行
removeListener(functionref)	从媒体查询列表中删除以前添加的监听函数。如果指定的监听不在列表中，则不执行任何操作

浏览器支持

方法
matchMedia()	9.0	10.0	6.0	5.1	12.1

语法

window.matchMedia(mediaQueryString)

参数值

参数	描述
mediaQueryString	必填。表示要为其返回新 MediaQueryList 对象的媒体查询的字符串

技术细节

返回值:	表示指定 CSS 媒体查询字符串结果的 MediaQueryList 对象

更多实例

实例

如果视口宽度小于或等于 700 像素，请将背景色更改为黄色。如果大于 700，则将其更改为粉红色:

<!DOCTYPE html>
<html>
<body>
<p>如果视口宽度小于或等于 700 像素，请将背景色更改为黄色。如果大于 700，则将其更改为粉红色。</p>
<p>调整浏览器大小以观察效果</p>
<script>
function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // 在运行时调用监听函数
x.addListener(myFunction) // 在状态更改时附加监听函数
</script>
</body>
</html>