Media feature

以下列出各種面向的 Media feature，一般來說較常使用的可能是有關於設備的顯示區域大小，應用在響應式網站時非常有用，除此以外，其實規範中也有許多不同的 Media feature，在各種情況下有其應用的優勢，那我們馬上進入介紹吧～

關於 viewport 以及頁面尺寸

width

描述了輸出設備的目標的顯示區域的寬度

height

描述了輸出設備的目標的顯示區域的高度

aspect-ratio

媒體特徵寬與高之比

orientation

指定了設備處於橫屏（寬度大於高度）模式還是豎屏（高度大於寬度）模式。

媒體顯示

resolution

指定輸出設備的解析度（像素密度）。解析度可以用每英寸（dpi）或每厘米（dpcm）的點數來表示。

scan

描述了電視輸出設備的掃描過程。

grid

判斷輸出設備是網格設備還是位圖設備。如果設備是基於網格的（例如電傳打字機終端或只能顯示一種字形的電話），該值為1，否則為0。

update

渲染後能否更新

overflow-block

設備對於溢出 block 的處理

overflow-inline

設備對於溢出 inline 的處理

color

指定輸出設備每個像素單元的值。如果設備不支持輸出顏色，則該值為0。

color-index

指定了輸出設備中顏色查詢表中的條目數量。

monochrome

指定了一個黑白（灰度）設備每個像素的數值。如果不是黑白設備，值為0。

color-gamut

UA和輸出設備支持的顏色色域

互動媒體

pointer

裝置的 pointer 的精度

hover

裝置具備 hover 的功能

不建議使用的 Media feature

下列不建議使用，留著是為了確保向後兼容。請用除了這個類別以外的 Media feature 去選擇需要的設備。

結語

Media Query 涉及的內容非常多，有關於它本身的條件句如何構成，關於多組的 Media Query 如何組合，以及現在的規範建議使用少量種類的 Media type 搭配多樣性的 Media Feature 去構成條件句，除此之外不知道大家有沒有注意到規範中的這麼一段話：

規範直通車：
CSS2.1
規範定義：
The specification has been written with two modes of presentation in mind: electronic and printed. Although the two presentations will no doubt be similar, readers will find some differences. For example, links will not work in the printed version (obviously), and page numbers will not appear in the electronic version. In case of a discrepancy, the electronic version is considered the authoritative version of the document.

其實規範本身也有印刷、顯示螢幕兩種版本，在不同版本的情況下顯示會有些為的不同，例如連結在印刷版本中不起作用、印刷版本的頁碼也不會顯示在顯示螢幕版本中，十分神奇～

如兩版本有差異，以電子版為權威版本。

以上，介紹 Media Query 的部分告一段落了，我們明天見～

參考資料：

Media Queries Level 4
Media Queries
前端新手村 Media Query - iT 邦幫忙
CSS Media Queries 詳細介紹 - OXXO.STUDIO

About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5

以上的部分有任何錯誤的地方，歡迎指正呦～非常感謝～～XD