媒體查詢的語法組成是「@media not|only mediatype and (expressions) {CSS程式碼...;}」;媒體查詢可由多種媒體組成,可包含一個或多個表達式,表達式根據條件是否成立回傳true或false。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有想法: 取代了查找裝置的類型,CSS3 根據設定自適應顯示。
媒體查詢可用於偵測很多事情,例如:
viewport(視窗) 的寬度與高度
裝置的寬度與高度
朝向(智慧型手機的橫屏,豎屏)
解析度
目前很多針對蘋果手機,Android 手機,平板等裝置都會使用到多媒體查詢。
查詢語法
@media not|only mediatype and (expressions) { CSS 代码...; }
多媒體查詢由多種媒體組成,可以包含一個或多個表達式,表達式根據條件是否成立傳回true 或false。
媒體類型
如果指定的多媒體類型符合裝置類型則查詢結果傳回true,文件會在符合的裝置上顯示指定樣式效果。
除非使用了 not 或 only 操作符,否則所有的樣式會適應在所有裝置上顯示效果。
值 | 描述 |
---|---|
all | 用於所有媒體設備 |
用於印表機 | |
#screen | 用於電腦螢幕,平板,智慧型手機等 |
speech | 用於螢幕閱讀器 |
#媒體功能
描述 | |
---|---|
定義輸出裝置中的頁面可見區域寬度與高度的比率 | |
定義輸出裝置每一組彩色原件的數量。如果不是彩色設備,則數值等於0 | |
定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表,則值等於0 | |
定義輸出裝置的螢幕可見寬度與高度的比率。 | |
定義輸出裝置的螢幕可見高度。 | |
定義輸出裝置的螢幕可見寬。 | |
定義輸出裝置中的頁面可見區域高度。 | |
定義輸出裝置的螢幕可見寬度與高度的最大比率。 | |
定義輸出裝置每一組彩色原件的最大數目。 | |
定義在輸出裝置的彩色查詢表中的最大條目數。 | |
定義輸出裝置的螢幕可見寬度與高度的最大比率。 | |
定義輸出裝置的螢幕可見的最大高度。 | |
定義輸出裝置的螢幕最大可見寬。 | |
定義輸出裝置中的頁面最大可見區域高度。 | |
定義裝置的最大解析度。 | |
定義輸出裝置中的頁面最大可見區域寬度。 | |
定義輸出裝置的螢幕最小可見寬。 | |
定義輸出裝置的螢幕的最小可見高度。 | |
定義輸出裝置中的頁面最小可見區域高度。 | |
定義輸出裝置中的頁面最小可見區域寬度。 | |
定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。 | |
定義裝置的解析度。如:96dpi, 300dpi, 118dpcm | |
#定義輸出裝置中的頁面可見區域寬度。 |
螢幕寬度大於480px,字體的大小設定為16px。
@media screen and (min-width: 480px) { body { font-size:16px; } }
以上是css3中媒體查詢的語法組成是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!