媒介類型
某些 CSS 屬性僅僅被設計為針對某些媒介。比方說 "voice-family" 屬性被設計為針對聽覺用戶終端。其他的屬性可被用於不同的媒介。例如,"font-size" 屬性可被用於顯示器以及印刷媒介,但是也許會帶有不同的值。顯示器上面的顯示的文檔通常會需要比紙媒介文檔更大的字號,同時,在顯示器上,sans-serif 字型更易閱讀,而在紙媒介上,serif 字型更易閱讀。
media規則
@media 規則使你有能力在相同的樣式表中,使用不同的樣式規則來針對不同的媒介。
下面這個例子中的樣式告知瀏覽器在顯示器上顯示 14 像素的 Verdana 字型。但是假如頁面需要被列印,將使用 10 個像素的 Times 字型。注意:font-weight 被設定為粗體,不論顯示器還是紙媒介:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print
{
p.test {font-family:times,serif; font-size:10px}
}
@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>....</body>
</html>
不同的媒介類型
注釋:媒介類型名稱對大小寫不敏感。
媒介類型 | 描述 |
---|
all | 用於所有的媒介設備。 |
aural | 用於語音和音頻合成器。 |
braille | 用於盲人用點字法觸覺回饋設備。 |
embossed | 用於分頁的盲人用點字法印表機。 |
handheld | 用於小的手持的設備。 |
print | 用於印表機。 |
projection | 用於方案展示,比如幻燈片。 |
screen | 用於電腦顯示器。 |
tty | 用於使用固定密度字母柵格的媒介,比如電傳打字機和終端。 |
tv | 用於電視機類型的設備。 |