流式排版：让字号、间距、宽度随视口连续变化，只在必要处才用断点

① clamp(min, ideal, max)：三个参数分别是什么

这个标题用 font-size: clamp(1.25rem, 1rem + 2.5vw, 2.25rem)

正文同样用 clamp，只是斜率小得多。ideal 那一项必须是「带视口单位的表达式」（如 1rem + 0.4vw）才会真的流动；只写单值就退化成普通的 min/max 选择。拖动 iframe 宽度对比上面两个标题。

同样位置写死 font-size: 22px 的效果（不随宽度变化）
/* 换算公式：理想值 = 基准rem + 斜率vw
   斜率 = (最大px - 最小px) / (最大视口px - 最小视口px) × 100
   基准 = 最小px - 斜率 × 最小视口px / 100 */
h1 { font-size: clamp(1.5rem, 1.06rem + 2.2vw, 3rem); }
/* 间距同理，避免「窄屏挤、宽屏散」 */
section { padding-block: clamp(24px, 4vw, 64px); gap: clamp(8px, 1.5vw, 20px); }

② min() 与 max()：一行代码替代一条媒体查询

容器 width: min(100% - 32px, 720px) + margin-inline: auto —— 宽度上限 720px，窄屏时自动留出 16px 边距，永远不会贴边。这就是「无需断点的居中容器」。
width: clamp(240px, 40%, 420px) 的列：不小于 240px、不大于 420px。
.wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.gutter { padding-inline: max(1rem, env(safe-area-inset-left)); }  /* 刘海屏安全区 */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }  /* 100% 防止窄屏出现横向滚动 */

③ aspect-ratio：先定比例，宽度自己填

16 / 9
1（头像、封面缩略图）
4 / 3
/* 老办法：padding-top 百分比撑高（16:9 → 56.25%），已在被 aspect-ratio 取代 */
.old { position: relative; padding-top: 56.25%; }
/* 新办法，并且可以用 height 反推宽度： */
.thumb { aspect-ratio: 16 / 9; height: auto; }
/* 与 min-height 同写时：aspect-ratio 让位于显式高度，比例只是「建议」 */
.cover-card { aspect-ratio: 16 / 9; min-height: 120px; }   /* 本站卡片封面正是这条 */

④ object-fit：图片在盒子里怎么被裁

fill（默认，会拉伸变形）
contain（完整，留白）
cover（铺满，裁切）
none（原尺寸，居中裁）
cover + object-position: right top

两条规则：等尺寸缩略图用 cover（配 object-position 指定保脸位置）；logo、截图、图表用 contain（不能裁）。卡片封面 = aspect-ratio: 16/9 + object-fit: cover，正是本站教程入口卡片的做法。

⑤ 全站级的两条基础规则

img, video, canvas { max-width: 100%; height: auto; }   /* 图片不撑破容器 */
/* height:auto 保住比例；但 srcset/显式 width+height 属性才是防布局抖动（CLS）的关键，见 HTML 教程第六章 */

⑥ 别忘了动效的降级

流式排版让尺寸自适应，动效则要在 prefers-reduced-motion 下收敛（第十三章 13a 已给全站写法），两者合起来才算「响应式」完成。