How TO - 使用 JavaScript 的媒體查詢
示例
如果視口寬度小於或等於 700 畫素，則將背景顏色更改為黃色。如果大於 700，則將其更改為粉紅色
function myFunction(x) {
if (x.matches) { // 如果媒體查詢匹配
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// 建立一個 MediaQueryList 物件
var x = window.matchMedia("(max-width: 700px)")
// 在執行時呼叫監聽函式
myFunction(x);
// 在狀態更改時附加監聽函式
x.addEventListener("change", function() {
myFunction(x);
});
自己動手試一試 »
使用 JavaScript 的媒體查詢
媒體查詢在 CSS3 中引入，是響應式網頁設計的關鍵要素之一。媒體查詢用於確定視口的寬度和高度，以使網頁在所有裝置（桌上型電腦、筆記型電腦、平板電腦、手機等）上看起來都很好。
window.matchMedia() 方法返回一個 MediaQueryList 物件，該物件表示指定 CSS 媒體查詢字串的結果。matchMedia() 方法的值可以是 CSS @media 規則 的任何媒體特性，例如 min-height、min-width、orientation 等。
在我們的 CSS 媒體查詢教程中瞭解更多關於媒體查詢的資訊。
在我們的 響應式網頁設計教程中瞭解更多關於響應式設計的資訊。
在我們的 JavaScript 參考中瞭解更多關於 window.matchMedia() 方法的資訊。
