responsive-rules 是一套面向响应式网页设计的规则型技能文档，围绕“流体适配”而非“压缩桌面布局”展开。资料将其核心原则表述为：响应式架构应覆盖连续变化的视口，需要标准化的断点层级、由 CSS clamp() 驱动的流体字体比例、用于组件模块独立性的容器查询（@container），以及符合人体工学的移动端拇指区导航。
使用方式上，资料给出四步响应式布局架构。第一步是断点策略与视口层级，采用移动优先：移动竖屏为基础档（小于640px，单列堆叠布局、拇指导航）；平板/移动横屏 640–767px（两列栅格、收起式头部）；平板横屏 768–1023px（侧边抽屉、展开式卡片）；桌面 1024–1279px（完整导航、12列栅格、内容最大宽度1200px）；宽屏/超宽屏为 1280px 以上及 1536px 以上（居中容器、限制最大宽度以免行长过长）。CSS 写法是先写移动端默认样式，再用 min-width 媒体查询逐层增加复杂度，资料附有 .grid-container 的三段式示例代码。
第二步是流体字体与间距比例。资料建议用 clamp(min, preferred, max) 消除断点处的字号跳变，并给出标题的 clamp 公式示例，同时把 clamp() 应用于容器内边距和栅格间隙，例如 gap 令牌 --gap-fluid: clamp(16px, 2vw + 8px, 32px)。
第三步是优先使用容器查询。资料指出卡片组件不应关心浏览器窗口多宽，而应关心父容器多宽：通过 container-type: inline-size 声明容器上下文，再用 @container (min-width: 400px) 切换卡片为横向排列，使同一组件在窄侧栏中纵向堆叠、在主内容区中横向展示。
第四步是拇指区与表格适配。移动端应把主要交互控件（悬浮操作按钮、底部导航、抽屉开关）放在屏幕底部40%的舒适拇指可达范围内。数据表格方面，资料列举两种模式：横向滚动加固定锚点列（冻结主标识列，如用户名，次要指标列横向滚动），以及在移动端把每行表格转换为独立堆叠卡片。
交付物方面，资料提供 RESPONSIVE-RULES.md 响应式布局规范模板，包含断点架构与栅格布局表（断点令牌、最小/最大宽度、列数、边距、间隙）、流体字体令牌（Display、H1、Body 的 clamp 值）、响应式导航行为（桌面左侧固定竖栏260px、平板图标竖栏64px、移动底部导航加抽屉）。资料还给出一个高密度分析表格的改造示例：10列财务遥测表格在移动端出现严重文本截断，改用容器查询后在容器小于500px时把表格行转为响应式 Bento 卡片，资料称移动端用户参与度提升54%并消除了缩放摩擦。
适用场景包括：设计响应式栅格断点、流体间距与自适应布局行为，制定跨设备的排版与导航规范，改造移动端数据表格。限制方面，资料未提供安装方式、依赖、平台支持范围、收费或价格信息；文档中的效果数据为资料自述，未提供独立验证细节。