CSS 媒體類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 媒體類型</title>
    <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 print,screen{
            p.test{font-weight: bold}

        }
    </style>
</head>
<body>
<h2>在屏幕和打印時顯示不同的字體</h2>
<p class="test">學的不僅是技術(shù) 更是夢想</p>

</body>
</html>

<!--

媒體類型
一些 CSS 屬性只設(shè)計了某些媒體。例如 voice-family 屬性是專為聽覺用戶代理。
其他一些屬性可用于不同的媒體類型。例如， font-size 屬性可用于屏幕和印刷媒體，但有不同的值。
屏幕和紙上的文件不同，通常需要一個更大的字體，sans-serif 字體比較適合在屏幕上閱讀，
而 serif 字體更容易在紙上閱讀。


-->

<!--

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

在下面的例子告訴我們?yōu)g覽器屏幕上顯示一個 14 像素的 Verdana 字體樣式。

但是如果頁面打印，將是 10 個像素的 Times 字體。請注意，font-weight 在屏幕上和紙上設(shè)置為粗體：

實例
@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+ 打印此頁，
你會看到，媒體類型將使用另一種比其他文本字體大小小點的字體顯示

-->



<!--

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

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



-->
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容