responsive

用途：在布局需要跨宽度自适应时使用，覆盖断点、流式字号与间距、容器查询、重排顺序和安全区内边距。核心原则：默认断点数为零，先构建本身已流式的布局（百分比与 fr 列、clamp() 字号、可换行 flex 行），确认从 320px 起可用，只在能指出具体破坏处的宽度加断点；断点应加在内容断裂处而非设备宽度。优先采用项目已有断点命名（如 Tailwind theme.screens、--breakpoint-、@custom-media 或 SCSS mixin），避免手写孤立 @media。只用 min-width 并以 rem 书写，如 @media (min-width: 48rem)，因为媒体查询的 rem 基于浏览器默认字号，能响应用户放大文字；max-height、print、prefers- 等无叠加形式的查询可单向使用。320px 是 WCAG 2.1 SC 1.4.10 回流要求的下限，数据表、地图、图表、源码等确需二维布局的内容可在自身容器内横向滚动。优先用 clamp() 替代断点，中间值须含 rem 项，如 clamp(1.75rem, 1.333rem + 2.083vw, 3rem)，纯 vw 会不响应文字缩放；发丝线、图标尺寸、点击区域、小控件圆角保持固定。组件用容器查询（@container 加 container-type: inline-size 的包裹层），外壳用媒体查询；容器不能查询自身，size 需确定高度，故用 inline-size。先写重排优先级，逐级折叠最低优先级区域，通过 DOM 而非 order 调整顺序。仅改字号的断点说明缺少结构变化。安全区内边距需 viewport-fit=cover，用 calc(16px + env(safe-area-inset-bottom)) 叠加，背景延伸至内边距下。高度单位按场景选择：可缩放面板用 100dvh，固定外壳用 100svh，桌面端 vh 即可。输出格式要求先给出宽度阶梯表，每行一个断点，仅改字号的行需重新考虑。资料还提供断点映射文件与检查清单，用于核对断点可追溯、仅 min-width、320px 可用、clamp 含 rem、组件用容器查询、重排顺序已记录、断点改变结构、viewport-fit=cover 与高度单位选择等。限制：未提供具体安装命令、收费或平台信息。