clamp() 设置字体大小在移动端不生效是怎么回事？

Mr-姿言提问于 2026-03-22 18:05:21 阅读 3

移动

我在做移动端页面时，想用 clamp() 让标题字体在小屏上不至于太大，但实际效果好像没起作用，文字还是特别大。是不是我写法有问题？

我试过这样写：

<h1 style="font-size: clamp(1rem, 4vw, 2.5rem);">响应式标题</h1>

在 iPhone SE 模拟器里看，字体明显超过了 2.5rem，而且缩放也不线性，是我对 clamp 的理解错了吗？

适配方案

我来解答赞 0 收藏

反馈

1 条解答

开发者春光 Lv1

clamp 这玩意有时候挺 tricky 的。你这写法基本没问题，但可能有几个地方需要注意。

首先，确保你的 viewport 设置正确，不然 rem 和 vw 可能会有问题。检查下 HTML 里的 viewport meta 标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

然后，有时候浏览器缓存会搞事，试试清除下浏览器缓存再看看。

最后，clamp 在不同浏览器和设备上的表现可能略有不同，尤其是旧版本的 iOS Safari。可以尝试加个 -webkit- 前缀试试：

<h1 style="font-size: -webkit-clamp(1rem, 4vw, 2.5rem); font-size: clamp(1rem, 4vw, 2.5rem);">响应式标题</h1>

如果这些都不管用，可能得考虑回退方案，比如用媒体查询手动设置不同屏幕尺寸下的字体大小。

2026-03-22 18:07