Window matchMedia()
示例 1
螢幕/視口寬度是否大於700畫素
if (window.matchMedia("(max-width: 700px)").matches) {
// 視口寬度小於或等於700畫素
} else {
// 視口寬度大於700畫素
}
自己動手試一試 »
描述
matchMedia()
方法返回一個包含查詢結果的 MediaQueryList。
另請參閱
媒體查詢
matchMedia()
方法的媒體查詢可以是 CSS @media 規則的任何媒體特性,例如 min-height, min-width, orientation 等。
示例
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
語法
window.matchMedia(mediaQuery)
引數
引數 | 描述 |
mediaQuery | 必需。 表示媒體查詢的字串。 |
返回值
型別 | 描述 |
一個物件 | 一個包含媒體查詢結果的 MediaQueryList 物件。 |
示例解釋
本頁上的第一個示例執行媒體查詢並將其與當前視窗狀態進行比較。
要在視窗狀態每次更改時執行響應式媒體查詢,請向 MediaQueryList 物件新增事件監聽器(參見下面的“更多示例”)
更多示例
如果視口寬度小於或等於500畫素,則將背景顏色設定為黃色,否則設定為粉色
// 建立一個匹配函式
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// 建立一個 MediaQueryList 物件
const mmObj = window.matchMedia("(max-width: 500px)")
// 在執行時呼叫匹配函式
myFunction(mmObj);
// 新增匹配函式作為狀態變化的監聽器
mmObj.addEventListener("change", function() {
myFunction(mmObj);
});
自己動手試一試 »
瀏覽器支援
matchMedia()
在所有現代瀏覽器中都受支援
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 11 |