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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。