在移动设备流量占比超过 60% 的今天，响应式设计已经不是可选项，而是必须。以下是我在多年前端开发中总结的最佳实践。

1. 移动优先

始终从移动端开始设计，然后逐步增强到更大屏幕。使用 min-width 媒体查询而非 max-width。

2. 使用相对单位

避免使用固定像素值，改用 rem、em、%、vw/vh 等相对单位。

3. 弹性图片

确保图片不会超出容器：

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

4. 合理的断点

常见的断点设置：

5. 避免固定宽度容器

使用 max-width 替代 width，让内容自然流动。

响应式设计的核心是「适应」而非「固定」，保持灵活性是关键。