09_CSS3多媒体查询
CSS3多媒体查询是一种能够根据设备特性（如屏幕宽度、分辨率、设备方向等）来应用不同样式规则的方法。
以下是一个简单的CSS3多媒体查询示例，它根据屏幕宽度来改变背景颜色：
/* 默认样式 */
body {
background-color: lightblue;
}
/* 当屏幕宽度小于或等于768像素时，应用以下样式 */
@media (max-width: 768px) {
body {
background-color: pink;
}
}
/* 当屏幕宽度在600像素到768像素之间时，应用以下样式 */
@media (min-width: 600px) and (max-width: 768px) {
body {
background-color: orange;
}
}在这个例子中，默认背景颜色为lightblue。当屏幕宽度减少到768像素或更小时，背景颜色变为pink。在600像素到768像素之间的屏幕宽度范围内，背景颜色变为orange。
评论已关闭