序

习惯了web开发的小伙伴，刚接触rem单位，常常会对其中的换算关系稀里糊涂、也不知道开发组长是怎样配置转换关系使得设计稿尺寸和开发尺寸对应起来的。本文就来详细讨论一下这其中的小伎俩，以方便大家心里有底、开发不愁~

使用场景

rem单位的初衷，主要是期望应用在移动端，希望字体、间距能随着不同屏幕尺寸而缩小放大。

和其他单位的区别。

相对的，px通常用在web端开发，是绝对单位， 不随设备屏幕大小而变更。 这么类比，明显的，rem是相对单位。

如何计算

说rem是相对单位，那么它相对的是什么呢？ 答：相对html根元素中设置的font-size值。

公式：size = html-font-size * rem-value

举例：

html中，font-size: 16px;
div中，font-zise: 2rem;
则：div中的font-size = 16px * 2 = 32px

那么，咦，这不是还是固定的？

是的，所以想要实现随移动端设备变更，就要让根元素html的font-size是个动态值！

实现rem值的动态结果配置

第一种方式，用vw单位。

我们先来说道说道vw这个单位。 vw，即视口宽度（view-width）。该单位基于视口的宽度。值1vw等于视口宽度的1％。

白话来说，vw其实是什么呢，就是把屏幕分成100个单位，1个vw就是屏幕宽度单位100份其中的一份，即1vw = w/100。所以375px尺寸宽的屏幕，100vw即375px。

好了，现在懂了vw的原理后，我们就能推导出设计稿中各个尺寸的size该如何计算了。

公式：设计稿size = 代码rem-value * html-font-size 举例：设置根font-size为100vm，即屏幕宽度375px，那么div元素的宽度2rem就是375 * 2 = 750px

html{ font-size: 100vm } // 375px
div{ width: 2rem } // 375 * 2 = 750px 

但是实际情况是，我们知道设计稿上div的width宽度，那么如何设置根font-size, 把vw设置为多少比较合适。试想一下，设计稿是px为单位，那么, 代码中标注rem的时候，最好是不要通过换算直接按设计稿设置，譬如设计稿是750px，我们就在代码中写750rem，是最方便的，不需要每个值都计算。那么我们就需要反推一个合适的vm值，来达到这目的。

举例：

// 假设设计稿尺寸为750px，最简单的就是让1rem = 1px
// 假设设计稿用的是375宽的屏幕为设计标准
// 那么vm怎么设置呢，就是1px/(375px/100) = 0.26667
// 其中，1px是目标，3.75px是屏幕每份的宽度
// 所以0.26667个vm就是1px，html的基准font-size就是1px
html{ font-size: 0.26667vm } // 1px
div{ width: 750rem } // 750 * 1px = 750px 

所以推导值就出来啦0.266667为最佳根元素font-size的vm设置值。实际项目中，也有许多讲根元素font-size设置为100px的，即26.6667vm

练习题

明白原理后，来做个练习，看看下边这个项目的根元素font-size如何设置。

已知：

• 项目为nextjs，尺寸关系为1->0.25rem（例如h-1代表高度为0.25rem）
• 设计稿为430px的屏幕基准规范

解答：

• 假设根元素设置为xvw，标准值高度为h-y, 设计稿高度为design-y
• 我们希望h-y = design-y, 从而使得代表标注简单无需换算
• xvw * (430 / 100) * h-高度 = 设计稿高度-高度
• 所以 x * 4.3 * 0.25 = 1
• x = 0.9302

html {
  font-size: 0.9302vw;
}

扩展

当设计师给了移动端、web端两份设计稿时，设置如下：

/* 当屏幕宽度小于或等于 1280px 时 */
@media (max-width: 1280px) {
  html {
    font-size: 0.9302vw;
  }
}

/* 当屏幕宽度大于 1280px 时 */
@media (min-width: 1281px) {
  html {
    font-size: 0.3125vw;
  }
}