JavaScript MediaQueryList API

MediaQueryList 對象

MediaQueryList 對象存儲來自媒體查詢的信息。

MediaQueryList 對象是窗口對象的屬性。

MediaQueryList 對象通過以下方式訪問：

window.matchMedia() 或僅用 matchMedia()：

實例

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

親自試一試

另請參閱：

window.matchMedia() 方法

MediaQueryList 屬性

屬性 描述
matches 布爾值。如果文檔與查詢匹配，則為 true，否則為 false。
media 字符串值。媒體查詢（列表）。

MediaQueryList 方法

方法 描述
addListener() 添加新的偵聽器函數，每當媒體查詢的評估結果發生變化時都會執行該函數。
removeListener()

從媒體查詢列表中刪除先前添加的偵聽器函數。

如果指定的偵聽器不在列表中，則不執行任何操作。

媒體查詢

matchMedia() 方法的媒體查詢可以是 CSS @media 規則 的任何媒體特性，如 min-height、min-width、orientation 等。

實例

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

親自試一試

媒體類型

值 描述
all 默認。用于所有媒體類型設備。
print 用于打印機。
screen 用于電腦屏幕、平板電腦、智能手機等。
speech 用于大聲“閱讀”頁面的屏幕閱讀器。

媒體特性

值 描述
any-hover 是否有任何可用的輸入機制允許用戶將鼠標懸停在元素上？
（Media Queries Level 4 中添加）。
any-pointer 是否有任何可用的輸入機制是指點設備，如果是，它的準確度如何？
（Media Queries Level 4 中添加）。
aspect-ratio 視口的寬高比。
color 輸出設備的每個顏色分量的位數。
color-gamut 用戶代理和輸出設備支持的大致顏色范圍
（Media Queries Level 4 中添加）
color-index 設備可以顯示的顏色數量。
grid 設備是網格還是位圖。
height 視口高度。
hover 主要輸入機制是否允許用戶將鼠標懸停在元素上？
（Media Queries Level 4 中添加）
inverted-colors 瀏覽器或底層操作系統是否反轉顏色？
（Media Queries Level 4 中添加）。
light-level 當前環境光級別（Media Queries Level 4 中添加）。
max-aspect-ratio 顯示區域的最大寬高比。
max-color 輸出設備每個顏色分量的最大位數。
max-color-index 設備可以顯示的最大顏色數。
max-height 顯示區域的最大高度，例如瀏覽器窗口。
max-monochrome 單色（灰度）設備上每種“顏色”的最大位數。
max-resolution 設備的最大分辨率，使用 dpi 或 dpcm。
max-width 顯示區域的最大寬度，例如瀏覽器窗口。
min-aspect-ratio 顯示區域的最小寬高比。
min-color 輸出設備每個顏色分量的最小位數。
min-color-index 設備可以顯示的最小顏色數。
min-height 顯示區域的最小高度，例如瀏覽器窗口。
min-monochrome 單色（灰度）設備上每種“顏色”的最小位數。
min-resolution 設備的最小分辨率，使用 dpi 或 dpcm。
min-width 顯示區域的最小寬度，例如瀏覽器窗口。
monochrome 單色（灰度）設備上每種“顏色”的位數。
orientation 視口的方向（橫向或縱向模式）。
overflow-block 輸出設備如何處理沿塊軸溢出視口的內容（Media Queries Level 4 中添加）。
overflow-inline 是否可以滾動沿內聯軸溢出視口的內容（Media Queries Level 4 中添加）。
pointer 主要輸入機制是指點設備嗎？如果是，它的準確度如何？
（Media Queries Level 4 中添加）。
resolution 輸出設備的分辨率，使用 dpi 或 dpcm。
scan 輸出設備的掃描過程。
scripting 是否可以使用腳本（例如 JavaScript）？（Media Queries Level 4 中添加）
update 輸出設備可以多快修改內容的外觀（Media Queries Level 4 中添加）。
width 視口寬度。