响应式策略与现代 CSS：断点、流体排版、容器查询、颜色与动画

0. 元信息

• 主题路径：docs/topics/html-css-responsive/subtopics/responsive-and-modern-css/
• 父主题：html-css-responsive
• 主分类：前端与客户端
• 辅助分类：工程技术
• 适合对象：会写 CSS 写死的字号与媒体查询（max-width）的开发者
• 建议周期：11.5 周（每周 812 小时）
• 前置知识：css-fundamentals-and-layout 子主题；理解盒模型与 cascade
• 最终目标：能用 mobile-first、clamp()、container queries 写出”任意宽度自然顺滑”的页面，并用 OKLCH + prefers-* 做出主题与减动画

1. 学习路线

viewport meta + 设计断点
  → mobile-first 与 min-width 媒体查询
  → clamp() 与流体排版（字号 / 间距）
  → Container Queries 与 container units（cqw / cqh / cqi / cqb）
  → 颜色：OKLCH、color-mix()、light-dark()、forced-colors
  → 暗色主题：prefers-color-scheme + class 双轨
  → 动画：transition、@keyframes、prefers-reduced-motion
  → View Transitions API（同文档与跨文档）
  → 综合：多断点同一组件 + 暗色 + 减动画

按”断点 → 流体 → 容器 → 颜色 → 动画”的顺序学。每一步都能在真机或 DevTools Device Mode 上看到效果。

2. 阶段周数分配（11.5 周，每天 1.52 小时）

总计约 12~18 小时；1 周紧凑，1.5 周可含真机回归与断点对照。

3. 九阶段表

陷阱：把 vw 当字号全靠它；container queries 写错容器名；动画全屏 + 高频闪烁忘了 reduce。

4. 第一周（每天 1.5~2 小时）

Day 1 约定：编辑器 = VS Code + 官方 CSS 扩展 + axe DevTools 扩展；浏览器 = Chrome + Firefox + Safari（如有 macOS/iOS）；本计划全程静态 HTML + CSS，不引入框架。截图与 DevTools Device Mode 记录到 notes/week1/dayN/，便于断点对照与回溯。

Day 7 步骤 C 是验收关键——开 reduce-motion 后所有动画必须”等价地静”，不是”消失但内容不对”。

5. 阶段通用验收

1. 不看答案重写该阶段的最小 demo（流体排版 / 容器查询 / 暗色 / 减动画 各 1 个）；
2. 解释”mobile-first vs desktop-first”、“clamp 公式”、“@media vs @container”、“prefers-reduced-motion 不是关动画”、“OKLCH 比 HSL 均匀在哪”；
3. 截图 3 种宽度（360 / 768 / 1440）+ 暗色 + 浅色 + reduce-motion + 高对比 至少 4 态；
4. 至少 1 个组件同时使用 @media 与 @container，能讲清”为什么这两处不能合并”；
5. 列出至少 3 类边界：流体字号在极小 / 极大屏不爆 / 暗色下 UA 表单不刺眼 / reduce-motion 下功能仍完整；
6. DevTools 截图能标出”这条 clamp 取了哪一段”；
7. 能修改现有页面（换主题、加断点、调动画）而不是只能照抄。

6. 最终验收

• 独立完成：1 份完整响应式落地页（4 断点：360 / 768 / 1024 / 1440）+ 1 套 token 体系（颜色 / 字号 / 间距 / 圆角 / 阴影）；
• 至少完成 9 个练习：2 个 viewport / 断点、2 个流体排版、2 个容器查询、2 个现代颜色 / 暗色、1 个减动画；
• 4 态切换：浅色 / 深色 / 高对比 / reduce-motion 全部覆盖；
• 至少 1 个组件同时使用 @media 与 @container；
• OKLCH + sRGB 回退双写；
• axe-core / axe DevTools 0 critical；
• 用 10 分钟讲清”viewport / 媒体查询 / 容器查询 / 流体排版 / OKLCH / 减动画”六者的关系与边界。

7. 综合项目

首选：用 mobile-first + 流体排版 + 容器查询 + OKLCH + 减动画 重做一份完整响应式营销页（同组件在 4 断点 + 4 态全部测试）。

必做：

• 4 断点：360 / 768 / 1024 / 1440 全部跑实机或 Chrome Device Mode 截图；
• 4 态：浅色 / 深色 / 高对比 / reduce-motion 全部切换零硬编码；
• 流体排版：5 级 type scale 全走 clamp()；
• 容器查询：至少 1 个 card 组件用 @container 自适应父容器；
• 颜色：调色板用 OKLCH；color-mix(in oklch, ...) 派生 hover / active；写 sRGB 回退；
• 动画：默认无动画，开启动作包在 @media (prefers-reduced-motion: no-preference) 内；
• View Transitions（可选）：SPA 路由切换动画；
• 真机或模拟在 4 断点 × 4 态各拍 1 张（共 16 张）。

备选：重构一套遗留”全媒体查询 max-width”的桌面端页面为 mobile-first + 容器查询，并加 OKLCH token 体系，附”原 vs 新”截图与 axe 报告。

notes/ 与 README 存放规范

所有截图、4 断点 × 4 态对照表、token 定义、clamp 计算表统一存放在项目根目录的 notes/ 子目录或 README 的对应章节。综合项目的 notes/ 至少包含：

• notes/design.md：断点 / 容器查询选型、token 表、clamp 计算、动画策略；
• notes/test.md：4 断点 × 4 态截图清单与编号、axe 报告；
• notes/retrospective.md：复盘（用时、难点、收获、未完成项）。

任何综合项目都必须包含：

1. 需求与受众；
2. 完整 token 体系（OKLCH 调色板 + clamp type scale + 间距 / 圆角 / 阴影）；
3. 完整源码（HTML + CSS，可含少量 JS 用于 menu 开关）；
4. 4 断点 × 4 态截图（共 16 张，编号清晰）；
5. clamp 计算表（每级字号在 320 / 768 / 1200 的实际像素）；
6. README：项目介绍、运行步骤、目录结构、复盘；
7. axe + Lighthouse 报告（HTML / JSON 原文）；
8. 复盘记录：用时、难点、收获、下一步。

本主题贡献（Loop 6-D · html-css-responsive / responsive-and-modern-css）

本主题给父主题与所有前端子主题交付”任意屏宽都能稳”的现代 CSS 模板，把 media query、container query、clamp()、fluid typography 四件套绑成 token 体系。

3 项核心职责

• 断点 + 容器查询双轨：media query 控全局（360 / 768 / 1024 / 1440），container query（@container + container-type）控组件级（卡片 / 侧栏按容器宽度自适应），两轨并行不互斥。
• 流体排版与 token：用 clamp(min, preferred, max) 写 fluid typography，每级字号在 320 / 768 / 1200 各算一次实际像素；token 体系（OKLCH 调色板 + 间距 / 圆角 / 阴影）走 CSS 自定义属性 + :root，全站一致。
• 现代 CSS 收口：color-mix() / light-dark() / @property / :has() / subgrid / view-transition 等现代特性按”目标浏览器 + 渐进增强”原则落地，砍掉遗留 hack。

4 项交付物

1. 断点 + 容器查询双轨模板：媒体查询的全局骨架 + 卡片组件的 @container 局部自适应，4 断点（360 / 768 / 1024 / 1440）截图齐全。
2. token 体系源码：OKLCH 调色板（含 dark）+ clamp type scale（5 级字号）+ 间距 / 圆角 / 阴影 token，配 clamp 计算表（每级字号在 320 / 768 / 1200 的实际像素）。
3. 流体排版 demo：标题 / 正文 / 辅助文字各 1 段，跨 4 断点字体像素逐点截图，覆盖 print 样式。
4. modern CSS 特性清单：@property 注册自定义属性动画、color-mix() 派生色、light-dark() 暗色自适应、:has() 父选择器、subgrid 卡片内对齐的实战 demo。

3 个验收指标

• 4 断点 × 4 态（浅 / 深 / 高对比 / reduce-motion）截图共 16 张齐全，编号清晰。
• clamp() 字号在 320 / 768 / 1200 实测像素与计算值偏差 ≤ 1px。
• axe + Lighthouse：a11y ≥ 95、Performance ≥ 90、最佳实践 ≥ 90。

8. 推荐开源资料

许可证提示：MDN / web.dev 内容采用 CC BY 4.0；W3C 规范文本由 W3C 公开；OKLCH Color Picker / Utopia.fyi 是开源工具；Rachel Andrew / Lea Verou / Bramus 博客为各作者所有。复制代码或长段引用前先看 LICENSE；默认做法是读思路后自己重写，而不是复制粘贴。

默认使用顺序：W3C 规范查文档 → web.dev 走主线 → caniuse 查兼容性 → OKLCH / Utopia 工具起骨架 → Rachel Andrew / Lea Verou 看一手 → 写 demo → axe 跑 a11y → DevTools Device Mode 4 断点 × 4 态对照。

9. 学习资料汇聚（v0.3 自包含）

9.1 背景与动机

2010 年 Ethan Marcotte 在 A List Apart 提出 Responsive Web Design：媒体查询 + 弹性图片 + 流式网格三件套。2014 年起 clamp() 被纳入 CSS Values 提案但一直未广泛使用。2020 年 Container Queries 提案进入 Chromium，2022 年底跨浏览器可用，2023 年定稿。

颜色领域，2021~2023 年 OKLCH、color-mix()、light-dark()、forced colors 陆续铺开。View Transitions API 在 2023 年跨浏览器可用，把”页面切换动画”做成声明式。

今天的”现代 CSS”意味着：少写硬编码断点（用 clamp 与 container queries），少写颜色样板（用 OKLCH 与 system colors），少写条件分支（用 prefers-* 媒介）。

9.2 概念地图

flowchart LR
  Viewport[meta viewport]
  Viewport --> Breakpoint[断点 min-width]

  Breakpoint --> Fluid[流体排版]
  Fluid --> Clamp[clamp / min / max]
  Fluid --> TypeScale[fluid type scale]

  Breakpoint --> CQ[Container Queries]
  CQ --> ContainerType[container-type: inline-size]
  CQ --> ContainerName[container-name]
  CQ --> Units[cqw / cqh / cqi / cqb]

  CSS[现代颜色]
  CSS --> Oklch[oklch / oklab]
  CSS --> ColorMix[color-mix]
  CSS --> LightDark[light-dark]
  CSS --> SystemColors[system colors]

  CSS --> Theme[主题与媒介]
  Theme --> Scheme[prefers-color-scheme]
  Theme --> Forced[forced-colors]
  Theme --> Token[token 体系]

  CSS --> Motion[动画与过渡]
  Motion --> Transition[transition]
  Motion --> Keyframes[@keyframes / animation]
  Motion --> ReducedMotion[prefers-reduced-motion]
  Motion --> ViewTransitions[@view-transition]

9.3 基础知识讲解

9.3.1 规范 / 提案

9.3.2 经典书籍 / 长文

9.3.3 优秀博客 / 文档

9.3.4 核心人物

9.3.5 开发方法

9.3.6 必读资源子集（≥5 条）

1. web.dev — Responsive web design basics
2. web.dev — Container queries
3. web.dev — clamp() / min() / max()
4. Rachel Andrew — CSS Container Queries
5. Lea Verou — OKLCH in CSS
6. Bramus — View Transitions

9.4 经典问题与经典案例

9.5 学习难点

概念难点

思维难点

工程难点

9.6 技术标准与接口

9.6.1 Entity

9.6.2 Scope

• 媒体查询：基于 UA / 用户偏好 / 视口特征。
• 容器查询：基于父容器尺寸与样式。
• 颜色：CSS Color 模块定义 oklch、color-mix、light-dark、system colors。
• 视图过渡：声明式 API，浏览器自动 capture / animate。

9.6.3 Structure

• 媒体查询语法：(min-width: 768px) / (prefers-color-scheme: dark) / (forced-colors: active) / (prefers-reduced-motion: reduce)。
• 容器查询语法：container-type: inline-size / container-name: card / @container (min-width: 600px) { ... }。
• 颜色函数：oklch(60% 0.2 240) / color-mix(in oklch, red, blue) / light-dark(#111, #eee)。
• 动画：transition: property duration timing / @keyframes / animation: name duration。
• 视图过渡：::view-transition-* 伪元素 / document.startViewTransition(() => update())。

9.6.4 Ecosystem

• 工具：Utopia.fyi（流体排版生成器）、Modern Font Stacks、Polypane、Polaris Figma Plugin、OKLCH Color Picker。
• 框架：astro-transitions、next-view-transitions、framer-motion（替代品）。

9.6.5 Depth Tiers

本子主题目标：L3。

9.6.6 Source

• W3C CSS WG
• web.dev — Container queries
• caniuse
• 引用快照日期：2026-07-30。

10. 常见误区

• vw 当 font-size 唯一尺度，没设上下限；
• clamp 的 MIN、MAX 颠倒了；
• container queries 写在错容器上；
• cqw 误以为会自动随视口变；
• 暗色只是反色，没重写 token；
• 没设 color-scheme 导致 UA 表单与作者样式冲突；
• 动画写满全屏没给 reduce-motion 分支；
• view-transition-name 没设导致切换无效；
• 视图过渡跨域图片因 CORS 拿不到快照；
• reduce-motion 状态下仍触发 scroll-linked 动画；
• 容器单位与媒体查询混用导致级联混乱；
• 用 100vh 在移动浏览器被地址栏遮挡；
• oklch 不写 sRGB 回退导致低端浏览器无颜色；
• 高对比模式（forced-colors）下自定义颜色被系统覆盖而不知；
• 把流体排版当作”绝对值”复制粘贴，没调过 MIN/MAX。

11. 所有知识点分类（统一规则）

本子主题归属：前端与客户端 主 + 工程技术 辅。