在网页开发中，我们常用的单位有如下几个：

综上所述，rem是最适合移动端开发的计量单位，因为rem只受html大小影响，所以控制html大小，rem就会随着变化。

假设平面设计师给了你一个750px宽度的设计稿，那么根元素html大小（假设为X）的计算方式为：

设备宽度 / 设计稿宽度 = X / 设计稿根元素大小

一般情况下，我们为了方便计算，会把设计稿根元素大小设置为100px，这样，设计稿上的 100px = 1rem，我们取到设计稿上元素的大小时，除以100就是代码中rem的大小。

例如，你测量设计稿banner宽度为750px，那你就css定义宽度为7.5rem

接下来，用js动态计算根元素html大小：

这样，设计稿上的 100px = 1rem，这样我们取到设计稿上元素的大小时，除以100就是代码中rem的大小。

例如，你测量设计稿banner宽度为750px，那你就css定义宽度为7.5rem

接下来有一种更为简单的适配方式，那就是vw和rem结合，该方式无需js，虽然vw对低版本安卓系统和IOS有兼容问题，但是时至今日，人们使用的手机越来越先进，这些都不再是大问题了。

假设，我们的设计稿宽度是750px，而设备宽度是恒定的100vw，为了方便测量，我们给设计稿根元素大小设置为100，那么设备html的根元素大小则可以直接计算出来：

font-size: 100vw / 750 * 100 ≈ 13.333333vw

实现代码如下：

这样，我们不借助js的计算就可以实现适配屏幕了。

用法和上边“rem结合js”适配一样：