Latest web development tutorials

CSS 媒體類型

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


媒體類型

一些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>

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


其他媒體類型

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

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