响应式布局技巧

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

1. 使用弹性单位

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

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

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

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

.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 让图片在父容器内自适应大小：

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

4. 隐藏/显示内容

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

.mobile-only {
  display: none;
}

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

5. Mobile First 哲学

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

响应式布局技巧示例

loading