响应式布局

断点系统定义与移动优先媒体查询

/* 断点系统：CSS 变量形式（与 Design Token 同步）*/
:root {
  --bp-sm: 36rem;   /* 576px  - 手机横屏 */
  --bp-md: 48rem;   /* 768px  - 平板 */
  --bp-lg: 64rem;   /* 1024px - 小桌面 */
  --bp-xl: 80rem;   /* 1280px - 大桌面 */
  --content-max-width: 72rem;  /* 最大内容宽 */
}

/* 移动优先：基础样式为最窄视口，min-width 逐级增强 */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;         /* 基础：单列 */
  gap: var(--space-4);
}

@media (min-width: 48rem) {           /* md：双列 */
  .card-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {           /* lg：三列 */
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 桌面优先（对比，不推荐用于新项目）*/
/* .card-grid { grid-template-columns: repeat(3, 1fr); } */
/* @media (max-width: 64rem) { grid-template-columns: 1fr 1fr; } */
/* @media (max-width: 48rem) { grid-template-columns: 1fr; } */

/* clamp() 流体排版：min / preferred / max */
h1 { font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem); }  /* 24px → 48px 流体过渡 */
p  { font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); }
.container { padding-inline: clamp(1rem, 5vw, 3rem); } /* 响应式内边距 */

下表为示例约定（项目应替换为设计系统真实值）：

Container Query 与 Grid+Flexbox 组合布局

/* Container Query：组件宽度由父容器决定，不依赖视口 */
.sidebar-widget {
  container-type: inline-size;
  container-name: widget;  /* 命名容器：可针对性查询 */
}

/* @container 规则：同一组件在窄侧栏和宽主栏自动适配 */
.widget-grid {
  display: grid;
  grid-template-columns: 1fr;  /* 默认单列 */
}

@container widget (min-width: 28rem) {
  .widget-grid { grid-template-columns: 1fr 1fr; }
}

@container widget (min-width: 44rem) {
  .widget-grid { grid-template-columns: repeat(3, 1fr); }
}

/* @supports 回退：不支持容器查询的浏览器 */
@supports not (container-type: inline-size) {
  .widget-grid { grid-template-columns: 1fr 1fr; }
}

/* Grid + Flexbox 组合布局实际代码 */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;  /* 固定侧栏 + 弹性主区 */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* 在 main 区域内用 Flexbox 处理内容流 */
.page-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}

/* 移动端：侧栏收折 */
@media (max-width: 48rem) {
  .page-layout {
    grid-template-areas: "header" "main" "footer";
    grid-template-columns: 1fr;
  }
  .page-sidebar { display: none; }  /* 或用 transform 侧滑 */
}

SKILL 中写明容器名（container-name）、查询阈值与回退：不支持容器查询的浏览器是否接受单列回退或通过 @supports 提供近似布局。

布局决策主流程

  [ 设计稿 / 栅格约定 ]
        │
        ▼
  ┌─────────────┐     根排版：clamp / rem、max-width（measure）
  │  流体与度量   │──── 安全区、viewport-fit、横屏最小高度
  └─────────────┘
        │
        ▼
  ┌─────────────┐     导航 / 全页分栏 / 主题级：@media (min-width …)
  │  视口断点    │──── 移动优先顺序、Token 与设计对齐
  └─────────────┘
        │
        ▼
  ┌─────────────┐     卡片 / 工具条 / 侧栏内模块：container + @container
  │  容器查询    │──── 命名、阈值、无支持时的单列回退
  └─────────────┘
        │
        ▼
  ┌─────────────┐     srcset/sizes、表格滚动或堆叠、触摸目标 ≥ 44×44 CSS px
  │  媒体与交互  │──── 折叠屏、键盘可聚焦、减少 motion 偏好
  └─────────────┘
        │
        ▼
  [ 视口矩阵截图 / Story 多视口 + 关键容器宽度录屏 ]

媒体、表格与触摸

指定图片与媒体的 srcset/sizes 或 CSS 对象适配策略，避免小屏加载过大资源；表格与宽表在窄屏下的横向滚动（含 overflow-x 与表头固定策略）或堆叠方案需写清。

触摸目标最小尺寸、安全区（notch）与 viewport-fit 若适用，应在步骤中点名；可配合 prefers-reduced-motion 审查动画是否降级。

页内演示：视口带与容器宽度

以下脚本仅在本页运行：上方反映当前视口宽度与示例断点带；下方拖动滑块改变查询容器宽度，观察 @container (min-width: 22rem) 下列数切换。

SKILL 大纲