菜鸟教程
教程 css tutorial

响应式布局技巧

响应式布局是现代 Web 开发的核心能力，目的是让网页能在各种设备（手机、平板、桌面）上良好呈现。以下是一些常用技巧与建议。

1. 使用弹性单位

避免使用固定像素，可使用百分比、em、rem、vw、vh 等相对单位，使布局更具适应性：

css 
.container {
  width: 80%;
  padding: 2vw;
}

2. 栅格系统与媒体查询结合

结合媒体查询设置不同断点下的列数，实现自动换行与重排：

css 
.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .col {
    flex: 1 1 50%;
  }
}

3. 图片和媒体内容响应式

使用 max-width: 100% 和 height: auto 让图片在父容器内自适应大小：

css 
img {
  max-width: 100%;
  height: auto;
}

4. 隐藏/显示内容

根据设备特性显示不同内容：

css 
.mobile-only {
  display: none;
}

@media (max-width: 600px) {
  .mobile-only {
    display: block;
  }
}

5. Mobile First 哲学

优先为移动设备编写基础样式，再通过媒体查询为更大设备“增强”样式。

响应式布局技巧示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>响应式布局技巧示例</title>
<style>
.row {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 20px;
}


.col {
  flex: 1 1 100%;
  background-color: #ffe082;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .col {
    flex: 1 1 45%;
  }
}

@media (min-width: 1200px) {
  .col {
    flex: 1 1 30%;
  }
}



</style>
</head>


<body>
<div class="row">
<div class="col">栏目 1</div>
<div class="col">栏目 2</div>
<div class="col">栏目 3</div>
</div>
</body>


</html>

相关内容