CSS 媒體類型

CSS 媒體類型

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

媒體類型

某些 CSS 屬性僅僅被設(shè)計(jì)為針對(duì)某些媒介。比方說(shuō) voice-family 屬性被設(shè)計(jì)為針對(duì)聽覺用戶終端。其他一些屬性可用于不同的媒體類型。例如，font-size屬性可用于屏幕和印刷媒體，但有不同的值。屏幕和紙上的文件不同，通常需要一個(gè)更大的字體，sans - serif字體比較適合在屏幕上閱讀，而 serif 字體更容易在紙上閱讀。

@media 規(guī)則

@media 規(guī)則允許在相同樣式表為不同媒體設(shè)置不同的樣式。

在下面的例子告訴我們?yōu)g覽器屏幕上顯示一個(gè)14像素的 Verdana 字體樣式。但是如果頁(yè)面打印，將是10個(gè)像素的 Times 字體。請(qǐng)注意，font-weight在屏幕上和紙上設(shè)置為粗體：

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

你可以自己嘗試看看 ! 如果您使用的是 Mozilla / Firefox 或 IE5+打印此頁(yè)，你會(huì)看到，Media Types將使用另一種比其他文本字體大小小點(diǎn)的字體顯示。

提示：有關(guān) @media 規(guī)則的更多信息，請(qǐng)參考CSS參考手冊(cè)的CSS @media 查詢部分。

其他媒體類型

注意：媒體類型名稱不區(qū)分大小寫。

擴(kuò)展閱讀

CSS3教程：CSS3 多媒體查詢