CSS @media 規(guī)則

該@media規(guī)則可用于為單個(gè)樣式表中的多種媒體類型定義樣式規(guī)則。它后面必須緊跟一個(gè)逗號(hào)分隔的媒體類型列表和一個(gè)包含規(guī)則的塊。

使用 @media 規(guī)則，你可以針對(duì)不同的媒體類型定義不同的樣式。

@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的。

當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。

CSS @media 規(guī)則的使用語(yǔ)法

該規(guī)則的語(yǔ)法如下：

@media media type,... {
    /* media-specific rules */
}

你也可以針對(duì)不同的媒體使用不同 CSS 樣式：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

下面的示例演示了如何使用@media屬性。

@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屬性瀏覽器的兼容性，下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號(hào)；所有主流瀏覽器均支持該規(guī)則。

Firefox 1+ Google Chrome1+ Internet Explorer 9+ Apple Safari 1.3+ Opera 9.2+

進(jìn)一步閱讀

請(qǐng)參考以下教程：CSS Media Types。