HTML响应式布局代码
时间: 2024-06-24 21:01:06 浏览: 13
HTML响应式布局是一种网页设计技术,它允许网站根据用户的设备屏幕大小和方向自动调整其布局和内容呈现。这主要通过CSS媒体查询(Media Queries)来实现。以下是一个简单的HTML结构和一些基本的CSS规则,用于创建响应式布局:
```html
<!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 {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
display: flex; /* 使用Flexbox布局 */
flex-wrap: wrap; /* 新建行 */
}
.card {
background-color: #f1f1f1;
padding: 20px;
margin: 10px;
width: calc(100% / 3); /* 三列布局 */
box-sizing: border-box; /* 包含内边距和边框在宽度计算中 */
}
/* 媒体查询响应式 */
@media (max-width: 768px) { /* 当屏幕宽度小于或等于768px时 */
.card {
width: 100%; /* 单列布局 */
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<!-- 更多卡片... -->
</div>
</body>
</html>
```