响应式开发（HTML5CSS3）实现媒体查询的功能案例
warning:
这篇文章距离上次修改已过451天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式设计示例</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
@media (max-width: 768px) {
.header {background-color: #bbb;}
}
</style>
</head>
<body>
<div class="header">
<h1>响应式设计</h1>
<p>当浏览器窗口宽度小于768像素时，背景颜色会改变。</p>
</div>
</body>
</html>这个简单的HTML示例展示了如何使用CSS媒体查询来改变小屏设备上的样式。当浏览器窗口的宽度小于768像素时，.header 的背景颜色会从 #f2f2f2 变为 #bbb。这是响应式设计的一个基本实例。
评论已关闭