Safari 14 - min()、max()、clamp() 不适用于 vw 和 px 值答案

【问题标题】：Safari 14 - min(), max(), clamp() not working with vw and px valuesSafari 14 - min()、max()、clamp() 不适用于 vw 和 px 值
【发布时间】：2021-01-05 23:13:22
【问题描述】：

我有一个容器，我想在其中设置它的字体大小，以便它反映在它的孩子身上。

我正在使用以下内容来支持不同屏幕尺寸的字体大小：

.hero {
    font-size: clamp(4px, 1vw, 10px);
}

上面的 CSS 适用于 Google Chrome，但是当我在 Safari（确切地说是 Safari 14）上运行我的页面时，字体大小不会在我更改窗口大小时调整大小。如果我调整窗口大小然后刷新页面，字体确实会调整大小，但它会保持初始字体大小。

我也尝试过运行clamp() 的min() / max() 版本...

.hero {
    font-size: max(4px, min(1vw, 10px));
}

但我仍然遇到完全相同的问题。字体大小未在 Safari 上调整大小。我尝试用合理的 pt 值替换 px，但问题仍然存在。我不确定这个问题是否在 Safari 13 上，但我最近更新到 Safari 14。

这是一个已知问题吗？我错过了什么吗？如何在不使用任何 JavaScript 的情况下解决此问题？

【问题讨论】：

感谢您向我介绍 CSS 添加了 clamp()... TIL
您能否验证此代码在 Chrome 或 Firefox 等其他浏览器中是否有效？ AFAICT 这是在 Safari 13.1 中添加的，所以应该在 Safari 14 中工作。也许 1vw 不在 4px 和 10px 之间？
@TylerH 该代码在 Google Chrome 中完美运行，但在 Safari 14 中无法正常运行。既然您提到了，您认为 Safari 和 Google Chrome 对待 1vw 有什么不同吗？例如，如果窗口大小完全相同，Safari 中的 1vw 可能与 Chrome 中的 1vw 不同？
我认为他们的计算是一样的。我确实知道大约 5 年前，Safari 在 calc() 中的视口单元存在问题（因此在 clamp() 中可能存在问题）。不确定该错误是否仍然存在。
我对 Safari 14.0.1 有同样的问题。有解决办法吗？

标签： css safari font-size clamp

【解决方案1】：

显然，Safari 计算 clamp() 不正确...设置 min-height 属性就可以了。我已经更改了原始示例的值，因为它太小以至于您看不到任何效果：

.hero {
  min-height: 0vw;
  font-size: clamp(16px, 10vw, 32px);
}

然后：

<h1 class="hero">Hero Text</h1>

这是JSFiddle

【讨论】：

设置 min-height 使它在 safari 中工作！有什么注意事项吗？
@nish 如果你正在编译 scss 并使用 min-height: 0vw; vw 单位实际上会丢失，因为 0 在所有单位中都是相同的。确保使用 0.000001vw 或类似的东西来保持单位！
上面的 min-height 答案确实有效——但我也注意到，clamp() 函数本身确实可以正常工作，但仅在页面加载时才能正常工作。添加 min-height 允许它在窗口调整大小时流动，这显然是所需的结果，但只是发布我发现的内容:)