CSS @media(媒體)

CSS媒體類型使您可以格式化文檔，使其在各種類型的媒體（例如屏幕，打印，聽覺瀏覽器等）上正確顯示。

媒體類型簡介

CSS @media(媒體)是樣式表最重要的功能之一，您可以為不同的媒體類型指定單獨(dú)的樣式表。這是構(gòu)建打印機(jī)友好的Web頁面的最佳方法之一-只需為“打印”媒體類型分配不同的樣式表即可。

一些CSS屬性僅適用于某些媒體。例如，該page-break-after屬性僅適用于分頁媒體。但是，有幾個屬性可以由不同的媒體類型共享，但是可能需要對該屬性使用不同的值。font-size例如，該屬性可用于屏幕和打印介質(zhì)，但可能具有不同的值。

與更好的可讀性相比，文檔通常在計算機(jī)屏幕上需要比在計算機(jī)屏幕上更大的字體，而且無襯線字體也被認(rèn)為在屏幕上更容易閱讀，而襯線字體則在打印中很流行。因此，必須指定樣式表或一組樣式規(guī)則適用于某些媒體類型。

創(chuàng)建依賴于媒體的樣式表

通常使用三種方法來指定樣式表的媒體依賴關(guān)系：

方法1：使用@media規(guī)則

該@media規(guī)則用于在單個樣式表中為不同的媒體類型定義不同的樣式規(guī)則。通常，其后是用逗號分隔的媒體類型列表和CSS聲明塊，其中包含目標(biāo)媒體的樣式規(guī)則。

下面示例中的樣式聲明告訴瀏覽器在屏幕上以14像素Arial字體顯示正文內(nèi)容，但在打印的情況下將以Timespoint字體顯示12點(diǎn)。但是line-height，兩個屬性的值均設(shè)置為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;
    }
}

方法2：使用@import規(guī)則

該@import規(guī)則是為特定目標(biāo)媒體設(shè)置樣式信息的另一種方法-只需在導(dǎo)入的樣式表的URL之后指定以逗號分隔的媒體類型即可。

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

語句中的print媒體類型@import指示瀏覽器加載外部樣式表（print.css）并將其樣式僅用于打印媒體。

方法3：使用<link>元素

在media該屬性上的元素被用于指定目標(biāo)介質(zhì)為HTML文檔中的外部樣式表。

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

在此示例中，該media屬性指示瀏覽器加載外部樣式表“ screen.css”，并且僅將其樣式用于屏幕，而將“ print.css”用于打印。

不同的媒體類型

下表列出了可用于定位不同類型的設(shè)備（例如打印機(jī)，手持設(shè)備，計算機(jī)屏幕等）的各種媒體類型。

媒體類型