clamp()必须写在grid子项上而非容器上，用于font-size、width等属性实现响应式缩放，需单位统一、提供降级值，并慎用vmin替代vw以适配横屏。
clamp()必须写在grid子项上，不是grid容器上
Grid本身不处理字体或尺寸缩放，它只分配空间。真正让文字或元素响应式变化的，是font-size、width、gap等属性自身的声明。如果你把font-size: clamp(1rem, 2.5vw, 1.5rem)写在.grid-container上，所有子项会继承这个字号——但你失去对单个卡片标题、正文、按钮的独立控制。正确做法是直接写在子元素上，比如.card-title或.product-name。
常见错误包括：
- 在
display: grid父元素上设font-size: clamp()，结果整页文字被统一拉伸 - 误用
em作基准单位，嵌套时因父级字号变化导致计算偏移 - 漏掉降级声明，旧版Safari（iOS 13.7及更早）会完全忽略
clamp()，文字变成浏览器默认大小
用clamp()控制单列最小宽度，嵌入minmax()内部
别用repeat(auto-fit, minmax(300px, 1fr))这种硬编码写法——300px在小屏上可能撑破容器，在大屏上又留白太多。要把clamp()放进minmax()的第一个参数里：minmax(clamp(250px, 30vw, 350px), 1fr)。
关键点：
-
clamp()必须在minmax()内，不能写在repeat()外层，否则Grid解析失败 - 单位要统一：避免混用
rem和vw，比如clamp(1.5rem, 30vw, 22rem)会导致计算失准 - 数值需调试：4列网格比2列更挤，
clamp()上限得压低，否则小屏下文字换行或溢出
vmin比vw更适合标题和按钮文字
移动端横屏时，vw会突然变大（如iPhone横屏667px宽 → 4vw ≈ 26.7px），容易撑出卡片。而vmin取视口宽高较小值，横屏时按高度算（375px × 4% ≈ 15px），更稳。
适用场景：
- 导航栏、按钮、卡片标题：用
font-size: clamp(18px, 5vmin, 32px) - 正文段落：继续用
vw，因为用户主要竖屏阅读，宽度变化平缓 - 注意
vmin在桌面端影响小，且Safari 14.1+已完整支持，无需额外兼容
上下限单位必须一致，且需提供降级值
浏览器对单位混用极其敏感：font-size: clamp(1rem, 3vw, 24px)会直接忽略整条声明——因为1rem和24px类型不同，无法比较。
必须做到：
- 上下限同单位：全用
px、全用rem或全用vw - 前置静态降级：
font-size: 16px; font-size: clamp(14px, 4vmin, 20px); - 首选值可用
calc()增强灵活性，如clamp(10px, calc(5vw + 10px), 100px)
真正容易被忽略的是单位一致性——它不会报错，但会让clamp()静默失效，你看到的只是“没变化”，而不是“错了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
