CSS 媒體型別

CSS 媒體型別允許你格式化文件，以便在各種型別的媒體上正確顯示，例如螢幕、列印、聽覺瀏覽器等。

媒體型別簡介

樣式表最重要的功能之一是，你可以為不同的媒體型別指定單獨的樣式表。這是構建印表機友好網頁的最佳方法之一 - 只需為“列印”媒體型別指定不同的樣式表。

某些 CSS 屬性僅適用於某些媒體。例如， page-break-after 屬性僅適用於分頁媒體。但是，有幾個屬性可能由不同的媒體型別共享，但可能需要該屬性的不同值。例如，font-size 屬性可用於螢幕和列印介質，但可能具有不同的值。

與紙張相比，文件在計算機螢幕上通常需要更大的字型以獲得更好的可讀性，而且無襯線字型被認為更容易在螢幕上閱讀，而襯線字型在列印時很受歡迎。因此，有必要指定樣式表或一組樣式規則適用於某些媒體型別。

建立與媒體相關的樣式表

通常使用三種方法來指定樣式表的媒體依賴關係：

方法 1：使用 @media At 規則

@media 規則用於在單個樣式表中為不同的媒體型別定義不同的樣式規則。它後面跟著一個以逗號分隔的媒體型別列表和包含目標媒體樣式規則的 CSS 宣告塊。

下面示例中的樣式宣告告訴瀏覽器在螢幕上以 14 畫素 Arial 字型顯示正文內容，但是在列印時它將採用 12 號 Times 字型。但是，對於這兩者， line-height 屬性值設定為 1.2：

@media screen{
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}

注意： @media 規則之外的樣式規則適用於樣式表適用的所有媒體型別。CSS2.1 中，@media 內的 At 規則無效。

方法 2：使用 @import At 規則

@import 規則是為特定目標媒體設定樣式資訊的另一種方法 - 只需在匯入的樣式表的 URL 之後指定以逗號分隔的媒體型別。

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}

@import 語句中的 print 媒體型別指示瀏覽器載入外部樣式表（print.css）並僅將其樣式用於列印介質。

注意： 所有 @import 語句必須出現在樣式表的開頭，在任何宣告之前。樣式表中指定的任何樣式規則都會覆蓋匯入樣式表中的衝突樣式規則。

方法 3：使用 <link> 元素

在 <link> 元素上的 media 屬性上被用於指定目標介質為 HTML 文件中的外部樣式表。

<link rel="stylesheet" type="text/css" media="all" href="css/common.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">

在此示例中， media 屬性指示瀏覽器載入外部樣式表 screen.css 並僅將其樣式用於螢幕，而 print.css 用於列印目的。

提示： 你還可以指定多種媒體型別（每種型別用逗號分隔 media="screen, print"）以及 <link> 元素的媒體要求。

不同媒體型別

下表列出了可用於定位不同型別裝置的各種介質型別，如印表機、手持裝置、計算機螢幕等。

警告： 雖然有幾個媒體型別可供選擇，但大多數的瀏覽器只支援 all ， screen 以及 print 媒體型別。