用途：在需要跨设备适配时使用，覆盖桌面、平板、移动端布局、断点策略与内容优先级；也涉及横竖屏切换、容器查询（Container Queries）与 PWA/自适应应用。不适用于仅桌面端的内部工具，或仅移动端的原生 App（后者建议用 hig-principles）。
核心原则：Mobile-First，从小屏开始设计再向上扩展；内容优先级降级，屏幕变小时砍次要内容而非整体缩小；触控目标移动端最小 44×44px（Apple HIG），桌面端最小 32×32px。
标准断点：mobile-sm < 480px、mobile 480~768px、tablet 768~1024px、desktop 1024~1440px、desktop-lg > 1440px；简化版为 mobile < 768px、tablet 768~1024px、desktop > 1024px。
布局模式：桌面端多列布局、侧边栏、高信息密度，可用 Hover；平板双栏到单栏过渡，侧边栏可折叠，2 列卡片；移动端单列、底部操作、极简内容，表格转卡片或横向滚动，主操作放底部（Bottom Sheet / FAB），仅触控。
使用方式：按工作流程列出设备与断点，从移动端开始设计，列出移动端必需内容与桌面端补充内容，设计断点间过渡，验证触控目标尺寸，最后输出响应式说明。说明模板包含断点策略、布局变化表、内容降级、触控目标与异常处理（横屏移动按平板处理，超大屏内容居中且最大宽度 1440px）。CSS 采用 Mobile-First 思路，基础样式为移动端，再用 @media (min-width: 768px) 与 (min-width: 1024px) 逐级增强。
限制与常见坑：桌面优先直接缩小、断点过多、触控目标过小、隐藏关键内容、缺失横屏处理、忽略 Container Queries、桌面端不考虑窄屏。配套模板为 templates/responsive-accessibility-template.md。上游协作 page-structure、information-architecture，平行 design-tokens、hig-principles，下游 design-handoff。