为CSS中的所有属性设置REM的值

Question

我想在我的网站中随处使用rem（读取所有可能的属性）。但是，使用默认的rem-px转换率并不是非常直观：

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

因此我使用的html { font-size: 62.5%; }将为字体大小设置1rem = 10px。 但是，如果我想将margin / padding / border / ...设置为该转换率，那该怎么办？

谢谢！

Answer 1

我们在评论中对此进行了介绍，但基本上答案是将 base 字体大小设置为10px而不是62.5％，

html { font-size: 10px; }

现在，你所有的rem值都是1rem = 10px。这意味着你的计算实际上变得更加简单。

• 1.5rem = 15px
• 2rem = 20px

......等等。

现在margin:1rem确实意味着margin:1opx。

Answer 2

使用绝对单位在根级别设置字体大小会覆盖用户的浏览器设置（默认为中等 [16px]）。最好使用相对单位。例如。

// scss comments: use /* in css */
// 1rem = 10px
// 62.5*16px(base) = 10px
html {
  font-size: 62.5%; // will work when user change browser font
}