为什么手机端定义 rem 基准字号会用 26.667vw？

如何定义 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;