HTML window matchMedia()用法及代码示例

html中的window.matchMedia()方法用于返回MediaQueryList对象，该对象表示指定CSS媒体查询字符串的结果。 matchMedia()方法的值可以是CSS @media规则的任何媒体选项，例如min-height，min-width，方向等。

MediaQueryList对象具有两个属性和两个方法：

属性：
- matches:它用于检查查询结果，并返回布尔值。
- media:一个字符串，代表序列化的媒体查询列表。
方法：
- addListener(functionref)：添加一个新的侦听器函数，只要媒体查询的评估结果发生更改，该函数便会执行。
- removeListener(functionref)：从媒体查询列表中删除以前附加的侦听器函数。如果指定的侦听器不在列表中，则不执行任何操作。

用法:

window.matchMedia( mediaQueryString )

参数值：

mediaQueryString:字符串，表示要为其返回新的MediaQueryList对象的媒体查询。

返回值：此方法返回CSS媒体查询字符串。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Window matchMedia() Method</title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeesks</h1> 
        <h2>Window matchMedia() Method</h2> 
  
        <script> 
            function GFGFun(ar) { 
                if (ar.matches) { 
                    document.body.style.backgroundColor = "white"; 
                } else { 
                    document.body.style.backgroundColor = "gray"; 
                } 
            } 
  
            var ar = window.matchMedia("(max-width:850px)") 
            GFGFun(ar) 
            ar.addListener(GFGFun) 
        </script> 
    </center> 
</body> 
  
</html>

输出：

调整浏览器窗口大小之前：
调整浏览器窗口大小后：

支持的浏览器：下面列出了HTML窗口matchMedia()方法支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
苹果Safari
Opera

相关用法

注：本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | window matchMedia() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。