css - 字体大小 1px 与 rem 单位一起使用

Question

我正在寻找一个可以很好地缩放和缩放的布局(用户按下 ctr/cmd + [plus])。为此，我需要尺寸与字体大小一起缩放。使用 em 单位太棘手了，所以我正在考虑使用 rem (并为旧的 ie 复制每个维度属性)。

我最初的想法是将 html 元素的 font-size 设置为 10px，然后使用 1/10rem 作为像素替换。但是由于 body 上的字体大小在 px 中是任意设置的，因此 html 上的字体大小将专门用于 rem 测量。那么为什么不将其设置为 1px 呢？

优点是显而易见的 - 易于编写重复声明和可维护性。

至于缺点(除了表格重复声明)我想不出任何。但也许我错过了一些东西。这种方法有什么缺陷吗？

Answer 1

由于您已在正文中定义了可继承的字体大小，因此您可以安全地根据需要更改 html 字体大小。目前，这只影响 rem 值，但如果其他东西利用了这个值，那么这个 1px 非标准配置将破坏其他东西并且难以修复。

这可能会对使用 rem 的 3rd 方库产生影响，并且一些混淆可能来自于互换使用 em 和 rem。

我个人认为，如果使用 vanilla CSS(无预处理器)，使用这种非标准方法可以大大简化 rem 的使用，因为 1:1 rem:px 值非常直观。