Window matchMedia() 方法

Window 對象參考手冊 Window 對象

定義和用法

matchMedia() 返回一個新的 MediaQueryList 對象，表示指定的媒體查詢字符串解析后的結(jié)果。

matchMedia() 方法的值可以是任何一個 CSS @media 規(guī)則的特性, 如 min-height, min-width, orientation 等。

MediaQueryList 對象有以下兩個屬性：

media：查詢語句的內(nèi)容。
matches：用于檢測查詢結(jié)果，如果文檔匹配 media query 列表，值為 true，否則為 false。

MediaQueryList 對象還可以監(jiān)聽事件。通過監(jiān)聽，在查詢結(jié)果發(fā)生變化時，就調(diào)用指定的回調(diào)函數(shù)。

方法	描述
addListener(functionref)	添加一個新的監(jiān)聽器函數(shù)，該函數(shù)在媒體查詢的結(jié)果發(fā)生變化時執(zhí)行。
removeListener(functionref)	從媒體查詢列表中刪除之前添加的監(jiān)聽器。 ???? 如果指定的監(jiān)聽器不在列表中，則不執(zhí)行任何操作。

語法

window.matchMedia(mediaQueryString)

參數(shù)說明：

mediaQueryString: 必需，一個字符串，表示即將返回一個新 MediaQueryList 對象的媒體查詢。

返回值

返回 MediaQueryList 對象。

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個瀏覽器版本號。

Me方法hod
matchMedia()	9.0	10.0	6.0	5.1	12.1

實例

判斷屏幕（screen/viewport）窗口大小：

if (window.matchMedia("(max-width: 700px)").matches) { /* 窗口小于或等于 700 像素 */ } else { /*窗口大于 700 像素 */ }

運行代碼 ?

實例

判斷屏幕（screen/viewport）窗口大小，在小于等于 700 像素時修改背景顏色為黃色，大于 700 像素時修改背景顏色為粉紅色：

function myFunction(x) { if (x.matches) { // 媒體查詢 document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; } } var x = window.matchMedia("(max-width: 700px)") myFunction(x) // 執(zhí)行時調(diào)用的監(jiān)聽函數(shù) x.addListener(myFunction) // 狀態(tài)改變時添加監(jiān)聽器

運行代碼 ?

Window 對象參考手冊 Window 對象

其他擴展

上一篇：Window getComputedStyle() 方法下一篇：Window moveBy() 方法