HTML |窗口 matchMedia() 方法

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

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

1. 财产：
   • 匹配：它用于检查查询的结果并返回一个布尔值。
   • media：表示序列化媒体查询列表的字符串。
2. 方法：
   • addListener(functionref)：添加一个新的侦听器函数，每当媒体查询的评估结果发生变化时都会执行该函数。
   • removeListener(functionref)：从媒体查询列表中删除以前附加的侦听器函数。如果指定的侦听器不在列表中，则不执行任何操作。

句法：

window.matchMedia( mediaQueryString )

参数值：

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

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

例子：

  

    Window matchMedia() Method

  

    
        GeeksforGeesks
        Window matchMedia() Method
  
        
            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)
        
    

  

输出：

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

支持的浏览器： HTML 窗口 matchMedia() 方法支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 苹果Safari
• 歌剧