responsive-paradigms

响应式设计范式

移动设备、平板电脑和桌面设备在交互场景上有着根本差异。输入方式、屏幕空间、观看距离和使用时的意图都各不相同。响应式设计并不是在不同宽度下使用相同布局，而是在每个断点做出不同的设计决策。

三种范式

移动设备（< 768px）

• **输入：**触控——用手指，而非光标。点击目标尺寸 ≥ 44×44px。
• **导航：**底部标签栏（拇指可触及）或汉堡菜单抽屉。顶部导航不易触及。
• **使用时长：**经常被打断、以任务为导向，使用时间较短。优先展示最重要的内容。
• **内容：**单列布局。仅纵向滚动。没有悬停状态。
• **主要操作：**浮动操作按钮（FAB），或屏幕底部的全宽按钮。

平板电脑（768px–1024px）

• **输入：**触控，有时也使用键盘／触控板。属于混合范式。
• **导航：**横屏时可采用常驻侧边栏；竖屏时则折叠为抽屉。
• **内容：**适合使用双栏布局。主从模式（列表 + 详情并排）很自然。
• **主要操作：**可与内容内联放置，不一定要悬浮。

桌面设备（> 1024px）

• **输入：**鼠标支持悬停状态、键盘快捷键和精准点击。
• **导航：**常驻侧边栏或顶部导航。两者可同时显示。
• **内容：**多栏布局、密集信息、工具栏和上下文菜单。
• **主要操作：**与内容上下文相结合，并为高级用户提供键盘快捷键支持。

---

各断点下的区块行为

并非每个区块都需要在每个断点下以相同的位置显示，甚至不一定需要显示。

区块可以在移动设备上隐藏

次要内容（相关文章、补充侧边栏、装饰性插图）可以在低于某个断点时隐藏。请问自己：移动端用户需要这些内容吗？如果不需要，在移动端使用 display: none 是正确的。

默认采用堆叠；允许在同一容器内重新定位

默认的响应式调整方式就是堆叠——视口变窄时，水平排列的区块变为垂直排列。这能保留顺序和分组，让用户对页面的心理模型在跨越断点时保持不变。首先考虑这种方式。

**也允许重新定位元素，但前提是它仍处于大致相同的容器区域／范围内。**桌面端位于左侧的侧边栏，可以在移动端移至主要内容下方，或折叠为可展开区块：它仍是“主要内容旁边／周围的内容”，只是重新排布了。这没有问题。

需要避免的是：将元素移入不同容器或范围的重新定位——把卡片中的控件提到全局页眉，会让它看起来像不同的 UI，而不是重新排布。保持父级区域不变，只改变其中的排列方式。

Desktop:              Mobile:
[Main] [Sidebar]  →   [Main]
                       [▼ Related]  ← collapsed accordion, still "around the main content"

粘滞行为可以因断点而异

在桌面端使用 position: sticky 的元素，在移动端可能需要变成固定在底部的栏，也可能需要完全取消粘滞定位，以释放屏幕空间。

.toolbar {
  position: static; /* mobile: inline, not sticky */
}

@media (min-width: 1024px) {
  .toolbar {
    position: sticky;
    top: var(--header-height);
  }
}

导航会彻底变形

桌面端	移动端
常驻顶部导航或侧边栏	底部标签栏或汉堡菜单抽屉
显示标签 + 图标	仅图标（底部导航）或完整列表（抽屉）
导航项的悬停状态	无——仅支持触控
悬停时展开下拉菜单	点击展开，全屏显示或以面板形式显示

标签可以缩短，但必须能够还原完整含义

空间变得有限时，标签可以缩短或改为仅显示图标。缩短会隐藏信息，因此必须确保用户可以找到完整版本——与截断文本遵循相同的“截断 + 还原”约定（参见 [[repeated-component-alignment]]）：

• 通过 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 和超宽屏）上，必须限制内容的最大宽度，以保持可读性和使用舒适度。

• 人体工学： 将关键 UI 元素分散在 4K 屏幕的整个宽度上，会造成过度的颈部转动，也会让界面显得“支离破碎”。
• 可读性： 如排版指南所述，行长不应超过约 75 个字符。在没有最大宽度限制的 4K 屏幕上，单行文字可能横跨数千像素。
• “安全区域”： 为所有主要内容使用最大宽度容器（通常在 1280px 到 1600px 之间）。
• 全宽例外： 背景色、装饰图片和次要页脚可以保持全宽，以维持设计的“活力”，同时让内容保持居中并限制在容器内。

不同断点下的页眉元素

固定页眉遵循相同的原则。品牌标识和菜单控件都会随屏幕尺寸缩放，并且与边缘保持相同的内边距。

• 缩放品牌标识。 为桌面端设计的尺寸放在手机上会显得过于醒目：移动端较小、平板端适中、桌面端使用完整尺寸。高度约为 18 到 24px 的字标在移动端页眉中清晰易读。限制高度，让宽度随之变化，以保持纵横比。
• 保持边缘内边距一致。 Logo 和菜单控件位于两侧边缘，且与边缘的距离相同，并随断点变化。内边距过小会显得拥挤，还可能与圆角屏幕边缘发生碰撞。

换行后的行继承父级对齐方式

使用 flex-wrap 构建的药丸按钮、统计项或标签行，在换行后会保留自身的对齐方式。在居中的移动端纵向布局中，换行后的内容会贴左排列，而周围内容仍然居中，导致最后一个孤立项落在角落。让内部对齐方式与上下文一致：移动端居中，桌面端靠左。

帮助提示应匹配当前输入方式

根据指针和悬停媒体特性来决定显示手势还是按键提示，而不是根据驱动布局的视口宽度。手机上的按键说明毫无用处；窄窗口的桌面端仍然有键盘。没有可见提示的手势必须列出，因为没有其他方式能让用户发现它们。

审查清单

• 移动端导航是否使用底部标签栏或抽屉，而不是需要伸展拇指才能操作的顶部导航？
• 所有交互元素的触控目标是否至少为 44×44px？
• 次要版块是否在移动端隐藏或折叠，而不只是缩小？
• 粘性定位是否会根据断点调整——而不是让每个桌面端粘性元素在移动端也保持粘性？
• 布局是否采用移动优先构建，并逐步向上增强？
• 是否用触屏上的点击操作替代依赖悬停的交互（工具提示、下拉菜单）？
• 移动端的主要操作是否可以单手拇指触及？
• 超宽屏或 4K 显示器上的主要内容是否限制了最大宽度（例如 1440px）？
• 页眉中的品牌标识是否随断点缩放，且 Logo 与菜单控件是否使用相同的边缘内边距？
• 换行后的行（药丸按钮、统计项、标签）是否与所在上下文的对齐方式一致，而不是在居中列中默认靠左？
• 堆叠是否为默认的重排方式，重新定位是否限制在元素原有的容器或区域内，而不是移入其他范围？
• 标签缩短或简化为仅图标时，是否仍能还原完整含义（通过工具提示／aria-label、保留在其他位置的标签，或含义明确的图标）？
• 输入说明是否根据指针能力选择？对于没有可见提示的手势，是否已列出说明？