superior-responsive

更优的响应式设计

让同一项任务能在不同可用空间和输入条件下顺畅使用。响应式设计是重新编排，而不是缩小桌面布局。

根据内容诊断

• 找出阅读顺序、控件、数据或导航开始失效时的最小宽度。
• 找出造成宽度异常的元素；在找到根源之前，不要隐藏页面溢出。
• 检查固定宽度、最小尺寸、网格轨道、无法换行的文本、定位元素、媒体、表格和视口单位。
• 使用真实的长标签和密集内容进行测试，而不只是空白的理想情况。

在布局失效的位置选择断点。设备名称可以作为测试目标，但不能作为设计依据。

选择布局变体

确定在不同视口下保持不变的内容：用户任务、内容含义、可用操作和状态。然后决定哪些内容可以改变：分组、位置、密度、导航模式、内容呈现方式或交互顺序。

创建新的响应式布局、重新设计多个区域或选择不同的移动端和桌面端布局时，请阅读 references/responsive-composition-patterns.md。使用它来比较导航、侧边栏、网格、表格、表单、主视觉区、仪表板和页脚的布局变换模式。对于范围明确的溢出问题或断点修复，可直接处理，无需加载参考资料。

不要实现功能或内容归属逐渐分化的移动端和桌面端体验。不同变体可以有不同的外观和行为，但必须保留相同的任务契约。

有意地重新编排

• 列堆叠时，保持任务顺序。源顺序应当仍有意义。
• 在所有断点下保持统一、权威的语义和内容层级。不要只为了实现不同布局，就重复隐藏的桌面端和移动端主要内容副本。
• 根据内容需求折叠、换行、滚动有界的数据区域，或更改内容呈现方式。
• 网格使用能让每个项目保持实用的最少列数。不要仅为追求对称而保留桌面端网格。
• 在可读范围内调整字体和间距；避免为了勉强适配而缩小控件和文本。
• 当浏览器界面或键盘会影响可用空间时，优先使用动态视口单位和基于内容的最小尺寸。
• 只有当固定定位元素持续可用所带来的价值足以抵消其占用空间时，才使用固定定位。

导航与触控

• 在导航标签相互碰撞或目标区域过小时，及时调整导航。
• 显示当前位置，并确保折叠菜单可通过键盘和触控操作。
• 确保常驻页眉、底部栏、对话框和虚拟键盘不会遮挡内容或获得焦点的字段。
• 为控件提供足够的目标区域和间距。可见图标可以小于其交互区域。
• 不要依赖悬停来显示内容或提供必要操作。

当浏览器界面、虚拟键盘、刘海、折叠屏分区、屏幕方向、指针能力、独立显示模式或嵌入式容器会影响可用空间或交互时，请阅读 references/viewport-input-and-safe-areas.md。

溢出处理

• 在造成意外页面级水平滚动的元素处修复问题。
• 对宽表格、时间线或画布，可有意启用局部滚动，并提供清晰的视觉边界。
• 不要使用 overflow: hidden 来隐藏文本、焦点环、菜单或失效的布局。
• 允许长字符串换行；只有在完整值仍可访问时，才对其截断。

验证矩阵

在以下情况下测试更改涉及的界面：

• 支持范围内最宽的组合；
• 每个受影响断点的上下边界附近；
• 窄屏手机尺寸的视口；
• 与平台相关的文本缩放或浏览器缩放；
• 短内容和长内容；
• 对于有更改的表单，检查键盘焦点和打开的移动键盘。

确认没有意外的页面溢出、裁切、重叠、无法访问的操作或顺序变化。报告有代表性的尺寸，以及未测试的内容。

如果布局视口、视觉视口、容器和输入限制产生不同的行为，请在报告中区分说明。如果风险取决于键盘、安全区域、方向或触控行为，不要仅凭宽度仿真就声称覆盖了移动设备。