定義和使用
使用 @media 查詢,你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設置不同的樣式,特別是如果你需要設置設計響應式的頁面,@media 是非常有用的。
當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
CSS 語法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
你也可以針對不同的媒體使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒體類型
值 | 描述 |
---|---|
all | 用於所有設備 |
aural | 已廢棄。用於語音和聲音合成器 |
braille | 已廢棄。 應用於盲文觸摸式反饋設備 |
embossed | 已廢棄。 用於列印的盲人印刷設備 |
handheld | 已廢棄。 用於掌上設備或更小的裝置,如PDA和小型電話 |
用於印表機和列印預覽 | |
projection | 已廢棄。 用於投影設備 |
screen | 用於電腦屏幕,平板電腦,智能手機等。 |
speech | 應用於屏幕閱讀器等發聲設備 |
tty | 已廢棄。 用於固定的字元網格,如電報、終端設備和對字元有限制的便攜設備 |
tv | 已廢棄。 用於電視和網路電視 |
媒體功能
值 | 描述 |
---|---|
aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率 |
color | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備,則值等於0 |
color-index | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表,則值等於0 |
device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
device-height | 定義輸出設備的屏幕可見高度。 |
device-width | 定義輸出設備的屏幕可見寬度。 |
grid | 用來查詢輸出設備是否使用柵格或點陣。 |
height | 定義輸出設備中的頁面可見區域高度。 |
max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
max-color | 定義輸出設備每一組彩色原件的最大個數。 |
max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數。 |
max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
max-height | 定義輸出設備中的頁面最大可見區域高度。 |
max-monochrome | 定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。 |
max-resolution | 定義設備的最大解析度。 |
max-width | 定義輸出設備中的頁面最大可見區域寬度。 |
min-aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的最小比率。 |
min-color | 定義輸出設備每一組彩色原件的最小個數。 |
min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數。 |
min-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最小比率。 |
min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
min-height | 定義輸出設備中的頁面最小可見區域高度。 |
min-monochrome | 定義在一個單色框架緩衝區中每像素包含的最小單色原件個數 |
min-resolution | 定義設備的最小解析度。 |
min-width | 定義輸出設備中的頁面最小可見區域寬度。 |
monochrome | 定義在一個單色框架緩衝區中每像素包含的單色原件個數。如果不是單色設備,則值等於0 |
orientation | 定義輸出設備中的頁面可見區域高度是否大於或等於寬度。 |
resolution | 定義設備的解析度。如:96dpi, 300dpi, 118dpcm |
scan | 定義電視類設備的掃描工序。 |
width | 定義輸出設備中的頁面可見區域寬度。 |
參考: