css - 如何计算类型的 REM？

Question

如何为我的类型将 PX 转换为 REM？我已经阅读了 Jonathan Snook 关于使用 REM 的文章，但他使用的是 font-size:62.5%，它默认为您的字体大小为 10px（以便于计算）。如果我要使用 100%、75% 等，我将如何将我的 PX 单位转换为 REM？

Answer 1

Target Size / Base Size = Value

因为我们可以假设浏览器默认使用 16px（毕竟，这是 Jonathan Snook 所做的假设 62.5% 是 10px），那么你的 Base 是 16。如果你想要 32px，那么32 / 16 = 2，想要 40px，然后40 / 16 = 2.5想要 24 24 / 16 = 1.5。

75% 也是如此……确定 75% 是多少（它是 12）并执行相同的计算。如果你想要 32px，那么32 / 12 = 2.666，想要 40px，然后40 / 12 = 3.333想要 24 24 / 12 = 2。

Answer 2

如果您只是将此代码添加到您的样式文件中

html {
  font-size: 62.5%;
}

它将转换 1 rem=10px。现在你将以 10px 为基础工作。所以

body {
  font-size: 1.6 rem;
}

你的字体大小为 1.6*10=16 像素。