CSS 媒體類型 應用:相應式布局使用,特殊裝置效果
一、媒體類型了解
解釋:媒體類型允許你指定檔案将如何在不同媒體呈現。該檔案可以以不同的方式顯示在螢幕上,這使得你用不同的裝置看到的效果是不一樣的。
網頁端,手機端,pc端,app端,列印機,盲人機等等。并且一些css屬性是在特定的媒介裝置才會有的。
應用:
一些CSS屬性隻設計了某些媒體。例如"voice-family"屬性是專為聽覺使用者代理。其他一些屬性可用于不同的媒體類型。例如,"font-size"屬性可用于螢幕和印刷媒體,但有不同的值。螢幕和紙上的檔案不同,通常需要一個更大的字型,sans - serif字型(無倒角)比較适合在螢幕上閱讀,而serif字型(有倒角)更容易在紙上閱讀。
文法:@media 媒介{
選擇符 {css樣式設定}
}
媒體類型 | 描述 |
---|---|
all | 用于所有的媒體裝置。 |
aural | 用于語音和音頻合成器。 |
braille | 用于盲人用點字法觸覺回饋裝置。 |
embossed | 用于分頁的盲人用點字法列印機。 |
handheld | 用于小的手持的裝置。 |
用于列印機。 | |
projection | 用于方案展示,比如幻燈片。 |
screen | 用于電腦顯示器。 |
tty | 用于使用固定密度字母栅格的媒體,比如電傳打字機和終端。 |
tv | 用于電視機類型的裝置。 |
二、媒體類型應用
在下面的例子告訴我們浏覽器螢幕上顯示一個14像素的Verdana字型樣式。但是如果頁面列印,
将是10個像素的Times字型。請注意,font-weight在螢幕上和紙上設定為粗體:
<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>