MediaQueryList API
MediaQueryList 物件
MediaQueryList 物件儲存來自媒體查詢的資訊。
MediaQueryList 物件是 window 物件的一個屬性。
透過以下方式訪問 MediaQueryList 物件：
window.matchMedia() 或僅 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 | 預設。用於所有媒體型別裝置 |
| 列印 | 用於印表機 |
| screen | 用於電腦螢幕、平板電腦、智慧手機等。 |
| speech | 用於“朗讀”頁面的螢幕閱讀器 |
媒體特性
| 值 | 描述 |
|---|---|
| any-hover | 是否有任何可用的輸入機制允許使用者懸停在元素上？（在媒體查詢級別 4 中新增） |
| any-pointer | 是否有任何可用的輸入機制是指標裝置？如果是，其準確性如何？（在媒體查詢級別 4 中新增） |
| aspect-ratio | 視口寬度與高度之比 |
| color | 輸出裝置每個顏色分量的位數 |
| color-gamut | 使用者代理和輸出裝置支援的大致顏色範圍（在媒體查詢級別 4 中新增） |
| color-index | 裝置可以顯示的顏色數量 |
| grid | 裝置是網格還是點陣圖 |
| height | 視口高度 |
| hover | 主要輸入機制是否允許使用者懸停在元素上？（在媒體查詢級別 4 中新增） |
| inverted-colors | 瀏覽器或底層作業系統是否正在反轉顏色？（在媒體查詢級別 4 中新增） |
| light-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 | 輸出裝置如何處理沿塊軸溢位視口的內容（在媒體查詢級別 4 中新增） |
| overflow-inline | 沿內聯軸溢位視口的內容是否可滾動（在媒體查詢級別 4 中新增） |
| pointer | 主要輸入機制是否是指標裝置？如果是，其準確性如何？（在媒體查詢級別 4 中新增） |
| resolution | 輸出裝置的解析度，使用 dpi 或 dpcm |
| scan | 輸出裝置的掃描過程 |
| scripting | 指令碼（例如 JavaScript）是否可用？（在媒體查詢級別 4 中新增） |
| 更新 | 輸出裝置修改內容外觀的速度如何（在媒體查詢級別 4 中新增） |
| width | 視口寬度 |
