CSS 媒體型別

媒體型別允許你指定檔案將如何在不同媒體呈現。該檔案可以以不同的方式顯示在螢幕上,在紙張上,或聽覺瀏覽器等等。


媒體型別

一些 CSS 屬性只設計了某些媒體。例如 voice-family 屬性是專為聽覺使用者代理。其他一些屬性可用於不同的媒體型別。例如, font-size 屬性可用於螢幕和印刷媒體,但有不同的值。螢幕和紙上的檔案不同,通常需要一個更大的字型,sans-serif 字型比較適合在螢幕上閱讀,而 serif 字型更容易在紙上閱讀。


@media 規則

@media 規則允許在相同樣式表為不同媒體設定不同的樣式。

在下面的例子告訴我們瀏覽器螢幕上顯示一個 14 畫素的 Verdana 字型樣式。但是如果頁面列印,將是 10 個畫素的 Times 字型。請注意,font-weight 在螢幕上和紙上設定為粗體:

例項

@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;} }

你可以自己嘗試看看 ! 如果您使用的是 Mozilla / Firefox 或 IE5+ 列印此頁,你會看到,媒體型別將使用另一種比其他文字字型大小小點的字型顯示。


其他媒體型別

注意:媒體型別名稱不區分大小寫。

媒體型別 描述
all 用於所有的媒體裝置。
aural 用於語音和音訊合成器。
braille 用於盲人用點字法觸覺回饋裝置。
embossed 用於分頁的盲人用點字法印表機。
handheld 用於小的手持的裝置。
print 用於印表機。
projection 用於方案展示,比如幻燈片。
screen 用於電腦顯示器。
tty 用於使用固定密度字母柵格的媒體,比如電傳打字機和終端。
tv 用於電視機型別的裝置。