如何定义 rem 基准字号？
常见的设置基准字号大小是
html {
font-size: 26.667vw;
}
为什么要这样设置？26.667 这个数值是怎么来的？
先从手机端的设计说起，常见的手机端设计稿会选择 375、360 等尺寸，这是基于当前最常见的手机尺寸。
前端开发一般都是基于给定的 UI 设计稿之后才开始工作，有了设计稿后前端的尺寸计算要选择一个方便计算的会更简单，那选择 10 的倍数（比如 100 ）作为单位计算会更简便。
比如一个宽度为 180 的布局，就可以下面：
width: 1.8 * （单位尺寸）;
假设我们选择 100 作为尺寸值，我们使用 1rem 作为单位尺寸，那就定义出：
1rem = 100px
上面的例子就可以写成
width: 1.8 * 1rem;
// 1.8 * 1rem = 180px
假设设计稿尺寸我们选择 375，这时的基准字号定义为 m，它的单位使用 vw，则有如下等式
1rem = 100px
1 x m.vw = 100px
1vw = 375(px) / 100
1 x m x 3.75px = 100px
m x 3.75 = 100
m = 100 / 3.75
m ~= 26.667
所以这是基准字号设置为 26.667 的原因。
也可以使用下面的计算公式
// 100vw 表示的是屏的宽度
100vw = 375px
// 1rem 也就是基准字号的大小
// 1rem = 100px
mvw = 100px
100vw/mvw = 375px/100px
m = 10000/375
m ~= 26.667
当然我们也可以选择设计稿的尺寸为 360，那同样计算得出基准字号就是 27.778。不论使用那个尺寸的设计稿都是可以。
我们可以同一个基准字号，计算出不同尺寸设计稿尺的转换公式，假设我们基准字号都使用 26.667vw，在 375 尺寸的设计稿下 1rem = 100px，那在 360 尺寸的设计稿下表示 100px 又是多少 rem 呢？
[375] 1rem = 100px
[360] ?rem = 100px
// 假设在 360 设计稿下，基准字号为 26.667vw
? * 26.667vw = 100px
？ * 26.667 * 3.6px = 100px
? * 26.667 * 3.6 = 100
? = 100 / (26.667 * 3.6)
? = 100 / 96
所以使用 26.667vw 基准字号的 360 尺寸设计稿的单位尺寸可以表示为：
100/96rem
也可以用下面的公式转换
375 * 1rem = 100px
360 * ?rem = 100px
// 也就是
(375 * 1rem)/(360 * ?rem) = 1
375=360*?
? = 375/360
? = 100/96
所以我们常见的基准单位会表示成下面，表示 1px 的长度
1rem/96;
网友评论