使用 REM 单位的 html {font-size: 1px;} 有什么问题吗？答案

【问题标题】：Is there anything wrong with html {font-size: 1px;} for working with REM units?使用 REM 单位的 html {font-size: 1px;} 有什么问题吗？
【发布时间】：2021-11-20 16:50:28
【问题描述】：

html {font-size: 62.5%;} 似乎是将基本字体大小设置为 10 像素的标准方法。

例如，

html {font-size: 62.5%;}  /* 10px */
body {font-size: 1.5rem;} /* 15px */

但这会产生对浏览器字体大小 16px 的依赖。从长远来看，这似乎不可靠......为什么不只是......

html {font-size: 1px;}  /* 1px */
body {font-size: 15rem;} /* 15px */

这有技术问题吗？它看起来更干净，更可靠。为什么我没有看到人们这样做？

【问题讨论】：

对于任何不支持 rems 的浏览器都可能有问题。
像素回退body {font-size: 15px; font-size: 15rem;}还有其他原因吗？
我想说主要问题是任何阅读您的 1px 字体的 SE 都会将您的整个网站视为垃圾邮件。此外，我真的没有看到比边际收益更多的东西，可能还有很多问题。话虽如此，从技术 POV 来看，只要您不关心全能的 Google，我认为您不会有问题。顺便说一句，这个问题与stackoverflow.com/questions/8519545/… 重复
那么也许html {font-size: 10px;}。使用固定单位似乎比依赖浏览器的百分比更可靠html {font-size: 62.5%;} 人们为什么要这样做？
font-size: 62.5% 设置将字体大小设置为继承大小的 62.5%，这实际上可以是任何东西，即使对于 html 元素也是如此。如果你无论如何想设置字体大小为15px，最好直接设置为15px。那么问题是什么？当然，您的方法非常冒险；考虑当用户样式表有 html { font-size: 18pt !important } 时会发生什么。

标签： css fonts

【解决方案1】：

曾几何时，只有 IE 和文本缩放。其他浏览器出现并放弃了这个概念，转而支持缩放整个视口。毕竟，如果您难以阅读文本，那么您可能也很难看到图像和其他非文本元素。

当您使用相对字体大小时，有时必须将它们转换为屏幕上的基本像素。默认修饰符大体上预计为 16px，您可以将其想象为在 <html> 上方的 1 级元素上的声明。任何基本修改，例如主体上的62.5% 1 个相对单位等于 10px，都会缩小该值。

考虑到这一点，您实际上所做的就是自己动手，覆盖<html> 以上的浏览器基本字体大小并将其设置为 1px 值，从而使 1 em/rem 始终相等到身体内部 1px。但是，这是有代价的——由于您的直接像素值，浏览器不再能够传播它自己的基本字体值，因此您的声明忽略了用户可能设置的任何字体大小设置。换句话说，使用 1px 技巧会禁用浏览器的纯字体大小缩放。然而，与此同时，仅字体大小缩放在其意图上仍然存在根本性缺陷（查看 google.com 缩放字体的结果）。

如果您希望保留浏览器仅控制字体大小缩放并同时使用 1rem = 1px 的功能，您可能想要这个。编辑：我应该注意，由于最小字体大小设置（默认为 6px），这在 Chrome 中会出现问题。内边距和边距会将此值缩小为最小值。

html {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

【讨论】：

对于浏览器来说似乎很容易处理，只需缩放根 em 值，无论是否显式。
如果您可以重写浏览器功能而无需征得任何人的许可并以某种方式删除所有以前的版本，这非常容易。

【解决方案2】：

在 2020 中，您可以通过以下方式在 Chrome 中执行此操作：

chrome://settings/fonts

然后将最小字体大小从 6px 滑动到 0。现在，Chrome 不会覆盖任何字体大小的最小值。

【讨论】：