百分比 calc 与 clamp
百分比相对父元素，适合做流式宽度；calc() 可以把不同单位混算（如 100% - 40px）；clamp() 则给相对单位设上下限，是目前最实用的自适应函数之一。
三者常组合：width: clamp(280px, 90%, 960px) 表示“宽度 90%，但不少于 280px、不超过 960px”，一行代码替代多条媒体查询。
- 百分比相对父级，calc 可混合单位运算
- clamp(最小, 首选, 最大)：一行实现“弹性 + 限幅”
- 运算符两边必须留空格：calc(100% - 20px) ✓，calc(100%-20px) ✗
CSS
/* 容器：宽度 90%，限幅 280~960px */ .wrap { width: clamp(280px, 90%, 960px); margin: 0 auto; } /* 侧边栏固定 + 主栏自适应 */ .layout { display: flex; gap: 16px; } .layout .side { width: 240px; flex: none; } .layout .main { width: calc(100% - 256px); } /* 字号也 clamp：小屏 14px，大屏 18px，中间流畅变化 */ h1 { font-size: clamp(1.25rem, 4vw, 2rem); } /* 响应式正方形：padding-top 百分比相对宽度 */ .ratio-box { width: 100%; padding-top: 56.25%; position: relative; } .ratio-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
本节要点clamp(最小,首选,最大) 是自适应万金油；百分比相对父级，calc 用来做“减法”。
