CSS @media 规则
说明
@media 规则可用于在单个样式表中为多种媒体类型定义样式规则。 它后面必须跟一个以逗号分隔的媒体类型列表和一个包含规则的块。
语法
此规则的语法如下所示：
|
@media media type,... { /* media-specific rules */ } |
下面的示例显示了 @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 规则之外的样式规则适用于样式表适用的所有媒体类型。 @media 中的规则在 CSS2.1 中无效
浏览器兼容性
所有主要的现代浏览器都支持 @media 规则。
 |
基本支持—
|
进一步阅读
请参阅以下教程： CSS 媒体类型.
Advertisements