Window matchMedia() 方法
Window 對象定義和用法
matchMedia() 返回一個新的 MediaQueryList 對象，表示指定的媒體查詢字串解析後的結果。
matchMedia() 方法的值可以是任何一個 CSS @media 規則 的特性, 如 min-height, min-width, orientation 等。
MediaQueryList 對象有以下兩個屬性：
- media：查詢語句的內容。
- matches：用於檢測查詢結果，如果文檔匹配 media query 列表，值為 true，否則為 false。
MediaQueryList 對象還可以監聽事件。通過監聽，在查詢結果發生變化時，就調用指定的回調函數。
| 方法 | 描述 |
|---|---|
| addListener(functionref) | 添加一個新的監聽器函數，該函數在媒體查詢的結果發生變化時執行。 |
| removeListener(functionref) | 從媒體查詢列表中刪除之前添加的監聽器。 如果指定的監聽器不在列表中，則不執行任何操作。 |
語法
window.matchMedia(mediaQueryString)
參數說明：
- mediaQueryString: 必需，一個字串，表示即將返回一個新 MediaQueryList 對象的媒體查詢。
返回值
返回 MediaQueryList 對象。流覽器支持
表格中的數字表示支持該方法的第一個流覽器版本號。
| 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) // 執行時調用的監聽函數
x.addListener(myFunction) // 狀態改變時添加監聽器