HTML 與 CSS2 目前是支援 media-dependent 的樣式表,但 CSS3 藉由更精確的標示來提升樣式表可依據媒體裝置來套用的支援度。 Media Query 包含了一種媒體類型以及至少一個表示式,使用特定媒體裝置來限制樣式表的套用範圍。例如:width、height 與 color。Media Query 讓呈現的內容裁切成輸出裝置的特定區域而不必去更改內容本身。這是個很有趣的使用方式,我們可以依據瀏覽裝置的能力來套用不同的樣式表。以下將簡單介紹 Media Query 的使用方式:
語法
- media_query_list: [, ]*
- media_query: [[only | not]? [ and ]*] | [ and ]*
- expression: ( [: ]? )
- media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
- media_feature:
width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | aspect-ratio | min-aspect-ratio | max-aspect-ratio | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
media query 不區分大小寫,其包含的未知媒體類型總是會得到 false
備註:圍繞在表示式旁的小括號是必要的,不使用的話會產生錯誤。
Media Features
大部分的 Media Feature 可以前置詞 “min-" 或 “max-" 來表示 “大於等於" 或是 “小於等於" 的限制條件。避免使用 “<" 與 “>" 符號與 HTML 和 XML 衝突。如果你使用 Media Features 而未設定值的話,若該值為非零的話則表示式會解析為 ture。
備註:如果 Media Features 未套用至瀏覽器所執行的裝置上,則包含 Media Features 的表示式將總是會產生 false。例如聽覺裝置 aspect ratio 的查詢將總是產生 false 的結果。
color
Value: <color>
Media: visual
Accepts min/max prefixes: yes
指的是輸出裝置每個顏色的位元數。如果該裝置不是一個彩色的裝置,該值會為 0.
註:如果色系擁有不同顏色的位元數,則使用最小的位元數。例如顯示器使用 5 位元的藍色與紅色以及 6 位元的綠色,則裝置會認為是每個顏色使用 5 位元的位元數。如果裝置使用的是 indexed colors,則在色系表中的顏色會使用最小的位元數。
範例:
套用樣式表至所有有顏色的裝置:
@media all and (color) { ... }
套用樣式表至每個顏色擁有至少 4 位元的裝置:
@media all and (min-color: 4) { ... }
color-index
Value: integer
Media: visual
Accepts min/max prefixes: yes
指的是輸出裝置顏色查詢表中紀錄的個數
範例:
指出樣式表應該套用到所有使用 indexed color 的裝置上,你可以這樣子用:
@media all and (color-index) { ... }
套用樣式表到擁有最少 256 顏色的 indexed color 裝置上:
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
aspect-ratio
Value: integer / integer
Media: visual , tactile
Accepts min/max prefixes: yes
描述輸出裝置選定區域的預期比率。該值包含二個以斜線(“/")字元分隔的正整數,這表示水平像素與垂直像素的比。
範例:
下面選取一個特定的樣式表,用來當顯示區域至少要像它的高度那樣的寬.
@media screen and (min-aspect-ratio: 1/1) { ... }
當預期的比率不是 1:1 就是大於此比率時,會套用該選取的樣式
device-aspect-ratio
Value: integer / integer
Media: visual , tactile
Accepts min/max prefixes: yes
描述輸出裝置預期的比率。該值包含二個以斜線(“/")字元分隔的正整數,這表示水平像素與垂直像素的比。
範例:
下面選定一個要用在寬顯示器的特殊樣式表:
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
當預期的比率不是 16:9 就是 16:10 時,會選取該樣式表
device-height
Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes
描述輸出裝置的高度(表示整個螢幕或是頁面,而不只是顯示區域,就像是該文件視窗 document window)
範例:
當在小於 800 像素寬的螢幕上來顯示時,要套用樣式表到一個文件,你可以這樣子做:
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
device-width
Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes
描述輸出裝置的寬度(表示整個螢幕或是頁面,而不只是顯示區域,就像是該文件視窗 document window)
grid
Value: integer
Media: all
Accepts min/max prefixes: no
檢測輸出裝置是否是一個 grid 裝置或是 bitmap 裝置。如果裝置是 個 grid-based(例如是一個 tty 終端機或是只能顯示一個字的電話裝置),則該值為 1,否則為 0.
範例:
套用樣式到擁有 15 個字元的手持裝置或是較窄的顯示裝置:
@media handheld and (grid) and (max-width: 15em) { … }
註:"em" 單位對於 grid 裝置有特殊的意義;因為精確的 “em" 寬度無法確定, 1em 假定為一個 grid cell 的寬度,並且是一個 cell 的高度
width
Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes
width 這個 media feature 描述輸出裝置顯示介面的寬度(就像文件視窗 document window 的寬度,或是印表機上頁框的寬度).
備註:當使用者改變該視窗時,Firefox 會根據媒體查詢使用 width 與 height 的 media features 來切換適當的樣式表。
範例:
如果想要指定手持裝置的樣式表,或是擁有寬度大於 20em 的螢幕裝置時,你可以使用這個樣式表:
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
這個 media query 指定了樣式表,應該要套用至比 8.5 英吋要寬的列印媒體裝置上:
<link rel="stylesheet" media="print and (min-width: 8.5in)" href="http://foo.com/mystyle.css" />
這個查詢指定了當視角在 500 與 800 像素之間的寬度時,會套用該樣式表:
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
height
Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes
height 這個 media feature 描述著輸出裝置顯示介面的高度(就像視角的高度或是印表機頁面框的高度).
備註:當使用者變更視窗大小時,Firefox 會根據媒體查詢使用 width 與 height 的 media features 來切換適當的樣式表。
monochrome
Value: integer
Media: visual
Accepts min/max prefixes: yes
指出在單色裝置(灰階)上每一像素的位元數。如果裝置不是單色的,則該裝置的值為 0
範例:
套用樣式表至所有的單色裝置:
@media all and (monochrome) { ... }
套用樣式表至擁有每像素最少 8 位元的單色裝置:
@media all and (min-monochrome:8) { ... }
orientation
Value: landscape | portrait
Media: visual
Accepts min/max prefixes: no
指出裝置是否為 landscape (顯示的寬度大於高度)或是 portrait (顯示的高度大於寬) 的模式.
範例:
只套用樣式表至 portrait oreintation:
@media all and (orientation: portrait) { ... }
resolution
Value: <resolution>
Media: bitmap
Accepts min/max prefixes: yes
指出輸出裝置的解析度(像素)。解析度不是設成 dpi 就是 pdcm
範例:
套用樣式表至擁有吋最少 300 dpi 解析度的裝置上:
@media print and (min-resolution: 300dpi) { ... }
scan
Value: progressive | interlace
Media: tv
Accepts min/max prefixes: no
描述電視輸出裝置的掃描過程。
範例:
只套用樣式表至逐行掃描的電視裝置:
@media tv and (scan: progressive) { ... }
延伸閱讀:
[…] 某網友翻譯W3C文件 https://zetajames.wordpress.com/2010/02/26/css3-media-queries/ […]
[…] 某網友翻譯W3C文件 https://zetajames.wordpress.com/2010/02/26/css3-media-queries/ […]