clamp()可替代媒体查询实现连续响应式字体与间距，需含vw/%单位；grid+minmax()自动列数；aspect-ratio防图片变形；container query支持组件级响应。
用 clamp() 替代媒体查询做字体和间距响应
纯 CSS 媒体查询不是唯一解，clamp() 能让字号、内边距、卡片宽度等属性随视口连续变化，避免断点跳跃。它接受三个参数：min、preferred、max，浏览器自动插值计算——只要容器有明确的相对单位（比如 vw），就能平滑响应。
常见错误是直接写 clamp(1rem, 2rem, 3rem)：三个值都是固定单位，失去响应性。必须至少一个含 vw 或 % 才生效。
-
font-size: clamp(1rem, 4vw + 0.5rem, 1.5rem);—— 小屏保底，大屏不撑爆，中间线性过渡 -
padding: clamp(0.5rem, 3vw, 1.25rem);—— 内边距随宽度缩放，比写三套@media更轻量 - 注意 Safari 13.1+ 才完全支持
clamp()，旧版需降级为calc()或保留最小断点
用 grid 的 minmax() + auto-fit 自动列数
卡片栅格布局最烦写一堆 @media 控制列数。用 display: grid 配合 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，浏览器会根据容器宽度自动算出能塞几列，每列最小 280px、最大均分剩余空间。
容易踩的坑是漏掉 minmax() 的第一个参数：如果只写 minmax(1fr, 1fr)，就失去最小约束，小屏下卡片会被压扁。
立即学习“前端免费学习笔记（深入）”；
- 卡片本身别设固定宽，用
width: 100%让它填满网格轨道 - 加
gap: clamp(0.75rem, 2vw, 1.5rem)统一控制间隙，避免 margin 塌陷问题 - IE 不支持
grid，如需兼容，得 fallback 到flex-wrap或 JS 补丁
用 aspect-ratio 锁定卡片内容比例，防图片变形
响应式卡片里图片或视频常因容器缩放而拉伸。CSS aspect-ratio 可声明宽高比（如 aspect-ratio: 16 / 9），浏览器自动维持比例，内部元素用 object-fit: cover 填充即可。
典型错误是给图片本身设 aspect-ratio：它只对块级容器生效。必须作用在包裹图的 <div> 或卡片主体上。
<ul>
<li>
<code>.card__media { aspect-ratio: 4 / 3; } —— 卡片媒体区始终 4:3，不管父容器多窄
overflow: hidden 和 img { width: 100%; height: 100%; object-fit: cover; }，确保裁剪一致padding-top 百分比 hack 模拟用 container query 实现真正组件级响应
当卡片要嵌入不同宽度的侧边栏或模态框里，视口级响应（vw）就不准了。@container 查询让卡片根据自身容器宽度调整样式，这才是“组件响应式”的正解。
现在最大的限制是：必须显式给容器设 container-type: inline-size，且该容器得有尺寸约束（比如 width、max-width 或 flex/grid 轨道限制），否则查询无效。
-
@container (min-width: 300px) { .card { --cols: 1; } }—— 卡片自己决定怎么排，不依赖全局断点 - 目前 Chrome 111+、Firefox 110+、Safari 16.4+ 支持，尚不能用于伪元素或跨 shadow DOM
- 别试图用
container-name做复杂命名空间，简单用匿名容器更稳
真正难的是把 clamp()、grid、aspect-ratio 和 container query 组合起来时的优先级冲突——比如 grid 轨道尺寸和 container query 触发时机可能错位。这时候得靠 devtools 的 layout 面板逐层看 computed 值，而不是猜。
