html响应式页面 （@media）
warning:
这篇文章距离上次修改已过437天，其中的内容可能已经有所变动。
在HTML中，可以使用CSS的@media规则来创建响应式页面，这允许你根据屏幕尺寸或设备特性来应用不同的样式规则。
以下是一个简单的例子，演示如何使用@media规则来改变页面的背景颜色，根据屏幕的宽度：
<!DOCTYPE html>
<html>
<head>
<title>响应式页面示例</title>
<style>
/* 默认样式 */
body {
background-color: blue;
}
/* 当屏幕宽度小于或等于768像素时 */
@media (max-width: 768px) {
body {
background-color: red;
}
}
/* 当屏幕宽度在600像素到768像素之间时 */
@media (min-width: 600px) and (max-width: 768px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>在这个例子中，默认情况下页面背景色是蓝色的。当屏幕宽度减少到768像素或更小时，背景色会变成红色。在600像素到768像素之间时，背景色变成绿色。这就是响应式设计的基本原理。
评论已关闭