CSS 媒體類型

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                   電視機型式的裝置上。    


繼續學習
||
<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>
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!