html响应式布局代码
时间: 2024-06-23 20:01:50 浏览: 11
HTML响应式布局是一种网页设计技术,通过CSS媒体查询和弹性网格系统,使网站能够根据用户的设备屏幕大小和方向自适应调整布局。以下是一个基本的响应式布局的代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 基础样式 */
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap; /* 分割成行 */
}
.box {
width: calc(100% / 3); /* 在屏幕小于600px时,每列3个 */
min-width: 200px; /* 设置最小宽度 */
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
}
/* 媒体查询:当屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
.box {
width: 100%; /* 当屏幕小,设置为全屏 */
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<!-- 更多的.box元素,这里省略... -->
</div>
</body>
</html>
```
在这个例子中,`.container`使用了flex布局,`.box`的宽度在大屏幕时设置为总宽度除以3,而在小屏幕时宽度变为100%,实现一栏显示所有元素。媒体查询(`@media`)用于定义不同屏幕尺寸下的样式。