定位与用途
响应式范式用于指导响应式布局的设计与实现，以及决定每个断点应当呈现什么内容。它的出发点是：移动端、平板和桌面是根本不同的交互语境，输入方式、屏幕可用空间、观看距离与会话意图都存在差异。因此，响应式设计不是同一套布局在不同宽度下重复出现，而是在每个断点上做出不同的设计决策。
三种范式
移动端（< 768px） 输入方式为触控，用手指而非光标操作，点击目标至少 44×44px。导航使用底部标签栏（拇指可及）或汉堡抽屉，顶部导航难以触及。会话往往被打断、以任务为中心且时长较短，因此应把最重要的内容放在前面。内容为单列、仅纵向滚动，没有悬浮状态。主操作通常采用悬浮操作按钮（FAB）或屏幕底部的全宽按钮。
平板（768px–1024px） 输入为触控，有时配合键盘或触控板，属于混合范式。导航在横屏时可采用常驻侧边栏，竖屏时收起为抽屉。内容可使用双栏布局，主从模式（列表与详情并排）在此非常自然。主操作可以内联在内容中，不必悬浮。
桌面端（> 1024px） 输入为鼠标（含悬浮状态）、键盘快捷键与精确点击。导航可同时显示常驻侧边栏与顶部导航。内容可多列、高密度，并配有工具栏与上下文菜单。主操作内联在内容语境中，并为高级用户提供键盘快捷键支持。
各版块跨断点行为
并非每个版块都需要以相同位置出现在所有断点上。次要内容（相关文章、补充侧栏、装饰性插图）可以在某个断点以下隐藏，判断标准是移动端用户是否真的需要它，如果不需要，在移动端使用 display: none 是正确做法。
堆叠是默认的重排方式：横向排列的区块在视口收窄时变成纵向列，保持原有顺序与分组，使页面心智模型在跨断点后依然成立。应优先考虑这一方式。
在同一容器内重新定位元素也是允许的，前提是它大体上仍处于原有容器区域。桌面端位于左侧的侧栏在移动端可以移到主内容下方，或收起为可展开区块，它仍然是“主内容旁边／周围的内容”，只是重新流动。需要避免的是将元素移入不同的容器或作用域——把卡片中的控件提到全局页头，读起来就是另一套界面，而不是重排。
粘性定位可以按断点变化：桌面端为 position: sticky 的元素，在移动端可能需要变成固定在底部的条形，或完全取消粘性以释放屏幕空间。示例代码如下：
.toolbar { position: static; /* mobile: inline, not sticky */ }
@media (min-width: 1024px) { .toolbar { position: sticky; top: var(--header-height); } }
导航的完全转换
桌面端使用常驻顶部导航或侧边栏、可见文字标签与图标、导航项悬浮状态、悬浮展开的下拉菜单。移动端则使用底部标签栏或汉堡抽屉、图标（底部导航）或完整列表（抽屉）、无悬浮状态、点击展开的全屏或面板式菜单。
标签可以缩短，但完整含义必须可恢复。空间紧张时，标签可被缩短或降级为纯图标。由于缩短会隐藏信息，应保留完整版本的获取途径，与截断文本采用相同的“截断＋恢复”契约：通过 title / aria-label 恢复（纯图标控件必须提供），或在详情视图／桌面布局中可见。纯图标只有在图标无歧义且通过 aria-label 承载标签时才成立，晦涩的图标比长单词更糟。
移动优先方法
先面向移动端设计与构建，再向更大屏幕渐进增强。移动端会强制排序优先级——能进入移动端的内容才是真正重要的内容。示例：
/* Mobile first: base styles are mobile */ .container { padding: var(--space-4); }
/* Enhance for larger screens */ @media (min-width: 768px) { .container { padding: var(--space-8); } }
@media (min-width: 1024px) { .container { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-8); } }
/* Ultra-wide protection */ @media (min-width: 1600px) { .container { max-width: 1440px; margin-left: auto; margin-right: auto; } }
最大宽度与超宽屏
响应式设计并不意味着无限扩展。在 2K、4K 和超宽显示器上，内容必须设定上限，以保持可读性与人体工学舒适度。人体工学方面，把关键界面元素铺满 4K 屏幕全宽会造成过多颈部移动，并让界面显得碎片化；可读性方面，行宽不应超过约 75 个字符，在 4K 屏幕上若无最大宽度，一行文本可能跨越数千像素。应为所有主内容使用最大宽度容器，通常在 1280px 到 1600px 之间。背景色、装饰图片和次要页脚可以保持全出血全宽，以维持设计的张力，同时内容保持居中与收敛。
页头在断点间的表现
固定页头遵循同样的范式：品牌标识与菜单控件都会缩放，并保持与边缘相同的内边距。品牌标识需要缩放——按桌面尺寸设计的 logo 放在手机上会显得过于抢眼，应移动端更小、平板适中、桌面完整；移动端页头中约 18 至 24px 高的字标读起来最清晰，应按高度约束并让宽度自然跟随以保持宽高比。边缘内边距应保持一致：logo 与菜单控件分列两侧、内边距相同并随断点缩放；内边距过紧会显得局促，还可能撞上圆角屏幕的边缘。
包裹换行的行需要继承父级对齐方式：用 flex-wrap 构建的胶囊、统计数据或标签行在换行后仍保持自身对齐，在居中的移动端单列中，换行会贴着左侧，而周围内容都是居中的，导致末尾单独一项落在角落。应让内部对齐方式与语境匹配：移动端居中，桌面端左对齐。
帮助提示与输入方式匹配
触控设备上显示手势提示，键盘设备上显示按键提示，依据指针与悬浮的媒体特性决定，而不是依据驱动布局的视口宽度。手机上显示按键图例毫无用处；而较窄的桌面窗口仍然有键盘。没有任何可见入口的手势必须列出，因为其他方式无法揭示它们。
评审清单
- 移动端导航是否使用底部标签栏或抽屉，而不是需要拇指拉伸的顶部导航？
- 所有交互元素的点击目标是否不小于 44×44px？
- 次要版块在移动端是被隐藏或收起，而不只是缩小？
- 粘性定位是否按断点适配，而不是所有桌面端粘性元素在移动端仍保持粘性？
- 布局是否以移动优先构建、向上渐进增强？
- 依赖悬浮的交互（工具提示、下拉菜单）在触控设备上是否替换为点击等价方式？
- 主操作在移动端是否仍可用单手拇指触及？
- 主内容在超宽／4K 显示器上是否用最大宽度（例如 1440px）加以限制？
- 页头品牌标识是否随断点缩放，logo 与菜单控件是否共享相同的边缘内边距？
- 包裹换行的行（胶囊、统计、标签）是否匹配所处语境的对齐方式，而不是在居中列中默认左对齐？
- 堆叠是否为默认重排方式，重新定位是否保持在元素原有容器／区域内，而未移入不同作用域？
- 标签被缩短或降级为纯图标时，完整含义是否可恢复（工具提示／aria-label、保留在别处的标签，或无歧义图标）？
- 输入提示是否依据指针能力选择，并在手势缺少可见入口时予以列出？