Question

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

如，

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

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

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

这有技术问题吗？它似乎更清洁，更可靠。为什么我看不到人们这样做？

Answer 1

在 2020 中，您可以在Chrome中执行以下操作：

chrome://settings/fonts

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

Answer 2

曾几何时，只有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

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

2 个答案: