页面要在手机、平板、电脑都好看,响应式是必修课。Claude Code能帮你写媒体查询、弹性布局、处理适配，下面就分享Claude Code怎么实现响应式布局的方法。
响应式布局的核心手段
- 媒体查询(断点)
- Flexbox / Grid 弹性布局
- 相对单位(rem / % / vw)
- 移动优先设计
- 图片 / 字体自适应
用法一:加响应式适配
「把这个布局改成响应式,在手机上单列、平板两列、电脑三列。」
用法二:用 Flexbox / Grid
「用 Grid 实现这个卡片网格,自动按屏幕宽度调整列数。」
用法三:移动优先
「按移动优先的思路重写这段样式,小屏为基础逐步增强。」
用法四:处理溢出与适配
「这个表格在手机上溢出了,帮我做适配(横向滚动或卡片化)。」
用法五:验证多端效果
配合预览工具,可在不同尺寸下查看效果,确认适配到位。
响应式布局实践建议
- 移动优先:从小屏开始,逐步增强。
- 合理断点:按内容定断点,而非死磕设备尺寸。
- 弹性单位:多用相对单位,少写死像素。
- 真机验证:不同设备实际看效果。
- 内容优先:小屏突出核心内容。
常见断点参考
| 设备 | 宽度参考 |
|---|---|
| 手机 | < 768px |
| 平板 | 768–1024px |
| 桌面 | > 1024px |
小结
把响应式布局交给 Claude Code,媒体查询、弹性布局、移动适配都能搞定。移动优先、弹性单位、真机验证,一套页面适配各种屏幕。