CSS @media 规则

该@media规则可用于为单个样式表中的多种媒体类型定义样式规则。它后面必须紧跟一个逗号分隔的媒体类型列表和一个包含规则的块。

使用 @media 规则，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS @media 规则的使用语法

该规则的语法如下：

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

你也可以针对不同的媒体使用不同 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属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该规则。

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

进一步阅读

请参考以下教程：CSS Media Types。