层叠样式表/媒体类型

可以将单个 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>

在浏览器中加载页面后，调整窗口大小，您将在满足条件时看到背景颜色发生变化。