设计响应式布局时如何按移动/平板/桌面三种交互范式分别决策…

在设计响应式布局、把桌面 UI 适配到移动端、或决定各断点显示什么内容时，按不同交互范式做设计决策。

适用场景

解决思路

1. 按三种范式分别设计：移动端（< 768px）用触摸输入、点击目标 ≥ 44×44px、底部标签栏或汉堡抽屉导航、单列纵向滚动、无 hover 状态、主操作用 FAB 或底部全宽按钮；平板（768px–1024px）触摸与键鼠混合、横屏可持久侧边栏、竖屏折叠为抽屉、可用两列与主从（列表+详情）布局、主操作可内联；桌面（> 1024px）鼠标 hover、键盘快捷键、持久侧边栏或顶部导航同时可见、多列密集信息、工具栏与上下文菜单、主操作内联并配快捷键。
2. 允许在移动端隐藏次要区块（相关文章、补充侧边栏、装饰性插图），若移动用户不需要就 display: none。
3. 默认用堆叠（stacking）做重排：横向排列的区块在窄屏变为纵向列，保持顺序与分组不变，优先采用。
4. 允许在同一容器/区域内重定位元素（如桌面左侧边栏在移动端移到主内容下方或折叠为可展开区块），但不要把它移到不同容器或作用域（如把卡片内控件提到全局 header）。
5. 按断点改变 sticky 行为：桌面 position: sticky 的元素在移动端可改为固定底栏或取消 sticky 以释放屏幕空间，用媒体查询分别设置。
6. 导航完全转换：桌面持久顶部导航或侧边栏、可见标签+图标、hover 状态、hover 下拉；移动端底部标签栏或汉堡抽屉、仅图标（底部导航）或完整列表（抽屉）、无 hover、点击展开为全屏或 sheet。
7. 标签可缩短或改为纯图标，但完整含义必须可恢复：用 title / aria-label（纯图标控件必需）或在详情视图/桌面布局中保留完整标签；纯图标仅在图标无歧义且带 aria-label 时可用。
8. 采用移动优先：基础样式为移动端，再用 min-width 媒体查询逐级增强（如 768px、1024px 调整 padding 与 grid 列），并加 1600px 断点做超宽屏保护。
9. 在超大屏（2K、4K、超宽）用 max-width 容器（通常 1280px–1600px，如 1440px）限制主内容，避免颈部过度移动和行宽超过约 75 字符；背景色、装饰图、次要页脚可保持全宽。
10. header 品牌标记随断点缩放：移动端更小、平板适中、桌面完整，按高度约束（如 wordmark 约 18–24px 高）让宽度自适应以保持宽高比；logo 与菜单控件分居两侧且使用相同边缘内边距，并随断点缩放。
11. flex-wrap 换行行（pills、stats、tags）继承父级对齐：在居中的移动列中让内层对齐与上下文一致（移动居中、桌面左对齐），避免换行后孤立项贴左角。
12. 按检查清单核对：移动导航用底部标签栏或抽屉而非顶部导航；所有交互元素触摸目标 ≥ 44×44px；次要区块在移动端隐藏或折叠而非仅缩小；sticky 按断点适配；移动优先渐进增强；hover 依赖交互（tooltip、下拉）在触摸端有点击替代；主操作在移动端单手拇指可达；超宽屏主内容有 max-width；header 品牌标记随断点缩放且 logo 与菜单控件共享边缘内边距；换行行对齐匹配上下文；堆叠为默认重排且重定位不跨容器；缩短或纯图标标签的完整含义可恢复。

适用边界 · 注意事项

• 当项目没有响应式需求或只面向单一固定尺寸设备时，不必套用多范式设计。
• 当元素重定位会把它移入不同容器或作用域（如从卡片提到全局 header）时，不要这样做，应保持父区域稳定。
• 纯图标方案在图标含义有歧义或无法提供 aria-label 时不要使用。