在 chrome 中使用 rem 的字体大小答案

【问题标题】：font-size using rem in chrome在 chrome 中使用 rem 的字体大小
【发布时间】：2021-01-08 23:00:17
【问题描述】：

我正在尝试弄清楚如何让 chrome 在字体大小的 css 中使用 rem。

按照article 中显示的结构，我将字体大小定义为：

font-size:   clamp(1rem, -0.875rem + 8.333vw, 1.3rem);

当我在本地环境中运行它时，它会在 chrome、firefox 和 safari 中按预期呈现。部署后，它会在 Firefox 和 safari 中按预期呈现。在 chrome 中，文本很小。

是否需要额外的步骤才能让 chrome 在 css 中使用 rem？

我已经看到非常老的帖子谈论在 chrome 中使用 rem 和媒体查询的问题 - 但找不到可能阻止 chrome 呈现字体大小的当前问题。

【问题讨论】：

奇怪的 :( ，不幸的是我没有给你答案，我只想提一下，我听说ems 是媒体查询中使用的最佳单位，你可以看到这里zellwk.com/blog/media-query-units。但无论如何，那篇文章不会暗示Chrome和rems有什么问题。：/

标签： css google-chrome

【解决方案1】：

很难说 100%，但它似乎是与 Chrome 扩展程序或其他东西相关的一些本地问题。请检查您的项目，以及下面在隐身模式下关闭扩展程序的示例。

在下面的示例中，您可以确保问题不在 REM 中，并将其与 EM 进行比较。

.with-rem {
  font-size:   clamp(1rem, -0.875rem + 8.333vw, 1.3rem);
}
.with-em {
  font-size:   clamp(1em, -0.875em + 8.333vw, 1.3em);
}

li {
  background-color: lightgray;
  margin: 10px 0;
}

<ul>
  <li>This list item not styled</li>
  <li class="with-rem">This list item styled with REM</li>
  <li class="with-em">This list item styled with EM</li>
</ul>

【讨论】：