# 响应式布局技巧

URL: https://caijiao.org/css/10-responsive/04-techniques
Source: docs/css/10-responsive/04-techniques.md
Description: 掌握响应式布局技巧可以帮助构建在不同设备上都具有良好体验的网页，提升用户访问的适配性与美观性。

响应式布局是现代 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 哲学

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

## 响应式布局技巧示例

[在线代码演示](/css/demos/30.html)