4

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

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

.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 的情况下解决这个问题？

4

1 回答 1

11

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

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

接着：

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

这是一个JSFiddle

于 2020-12-01T15:24:54.803 回答