层叠样式表/媒体类型

可以使单个 CSS 规则和整个样式表仅选择性地应用于某些媒体类型，例如屏幕、投影、打印或手持设备。

媒体类型规范

• 在 LINK 标签中
  • <LINK rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
• 在样式表中
  • @media screen {
    body { font-family: Verdana; width: 800px; }
    }
• 在 style 属性中

媒体类型

可以限制 CSS 应用的媒体类型

• all
• aural – 通常用于听力障碍者的规则。在 CSS3 中，它将被 speech 媒体类型弃用。
• braille
• embossed
• handheld
• print
• projection
• screen
• speech
• tty
• tv

媒体查询

媒体查询是 CSS3 下的一种新的规则格式，它将允许根据用户代理的属性（例如移动设备的屏幕分辨率）进行行为。此功能仅在 WebKit、Presto 和 Gecko 的最新版本中部分实现。

要尝试此功能，请将此代码复制到您的代码片段编辑器或新的 HTML 文件中

@media all {
	div.mediaqueryexample {
		height: 10em;
		width: 10em;
		background-color: red;
	}
}

@media all and (min-width: 640px) {
	div#mediaqueryexample1 {
		background-color: green;
	}
}

然后将此代码放入 body 中

<div class="mediaqueryexample" id="mediaqueryexample1">min-width: 640px</div>

在浏览器中加载页面后，调整窗口大小以查看满足条件时背景颜色是否会改变。