css3中媒體查詢的語法組成是什麼

媒體查詢的語法組成是「@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	用於所有媒體設備
print	用於印表機
#screen	用於電腦螢幕，平板，智慧型手機等
speech	用於螢幕閱讀器

#媒體功能

#值描述##aspect- ratio#colorcolor-indexdevice-aspect-ratiodevice-heightdevice-widthheightmax-aspect-ratiomax-colormax-color-indexmax-device-aspect-ratiomax-device-heightmax-device-widthmax-heightmax-resolutionmax-widthmin-device-widthmin-device-heightmin-heightmin-widthorientationresolution#width

定義輸出裝置中的頁面可見區域寬度與高度的比率
定義輸出裝置每一組彩色原件的數量。如果不是彩色設備，則數值等於0
定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
定義輸出裝置的螢幕可見寬度與高度的比率。
定義輸出裝置的螢幕可見高度。
定義輸出裝置的螢幕可見寬。
定義輸出裝置中的頁面可見區域高度。
定義輸出裝置的螢幕可見寬度與高度的最大比率。
定義輸出裝置每一組彩色原件的最大數目。
定義在輸出裝置的彩色查詢表中的最大條目數。
定義輸出裝置的螢幕可見寬度與高度的最大比率。
定義輸出裝置的螢幕可見的最大高度。
定義輸出裝置的螢幕最大可見寬。
定義輸出裝置中的頁面最大可見區域高度。
定義裝置的最大解析度。
定義輸出裝置中的頁面最大可見區域寬度。
定義輸出裝置的螢幕最小可見寬。
定義輸出裝置的螢幕的最小可見高度。
定義輸出裝置中的頁面最小可見區域高度。
定義輸出裝置中的頁面最小可見區域寬度。
定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。
定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
#定義輸出裝置中的頁面可見區域寬度。

舉例

螢幕寬度大於480px，字體的大小設定為16px。

@media screen and (min-width: 480px) {
    body {
       font-size:16px;
    }
}

（學習影片分享：

css影片教學

）

以上是css3中媒體查詢的語法組成是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！