| name | responsive-design |
| description | 响应式设计规范 —— 移动优先、断点系统、弹性布局与多设备视觉一致性 |
| category | 前端 |
| loading | on-demand |
| triggers | {"keywords":["响应式","responsive","移动端","适配","断点","media query","自适应"]} |
响应式设计规范
概述
提供从设计到实现的响应式 Web 设计完整规范,覆盖移动优先策略、断点体系、弹性布局和跨设备测试方案。
使用场景
- 新项目确定响应式适配策略和断点
- 已有页面在多设备上的适配问题修复
- 设计和前端就断点和布局达成一致约定
- 组件库开发时的响应式 API 设计
核心原则
- 移动优先:先设计移动端(最小屏幕),再通过
min-width 媒体查询逐步增强。移动优先天然限制内容优先级和性能。
- 断点基于内容而非设备:断点应在"布局开始不自然"的地方设置,而非盯住 iPhone 14 / iPad Pro 的具体分辨率。
- 弹性布局优先于固定尺寸:优先使用
%、vw、fr、flex、grid,px 仅用于最小/最大限制。
- 触摸友好:可点击元素最小 44x44px(iOS HIG),留有足够间距防止误触。
- 一致体验不等于相同布局:不同设备可以有不同布局和信息架构,只需保证核心功能一致可用。
标准断点
- Mobile:320px - 639px(默认样式,无媒体查询)
- Tablet:640px+(
@media (min-width: 640px))
- Desktop:1024px+(
@media (min-width: 1024px))
- Wide:1440px+(
@media (min-width: 1440px))
检查清单