前提
web开发中，浏览器不指定字体大小时，默认为16px：
浏览器默认字体大小为16px
此处的“默认”是针对整个页面的根元素html标签而定的，所以我们可以理解为，在这种情况下，当字体为100%大小时：
16px = 100%实际上，这种比例关系并不特指字体大小（因为css中，“字体大小”决定的实际上是字符框的高度），而是提供了不同分辨率下的一个默认“准则”。因此，利用这个特性，rem这个单位在css3中诞生了。
rem是根据html标签的font-size的大小计算出来的，因此我们可以近似上文的百分比，即
16px = 1rem。所以开发中当需要转换为rem单位时，我们把设计图上以px为单位的标注除以16即可，例如UI给了一个120px * 120px的按钮，我们即可转换为7.5rem * 7.5rem的按钮。
小改进
实际开发过程中，拿到设计图后每个标注的尺寸都要除以16会造成频繁的计算，一定程度降低了开发效率，为了便于计算，我们可以把rem的换算因子改为便于计算的数字，例如10px = 1rem，而rem是根据html标签的font-size的大小计算出来的，所以应有：
html {
font-size: 10px
}
我们亦可转换为百分比写法，因为默认情况下16px = 100%，则10px = 62.5%，故也可写作
html {
font-size: 62.5%
}
px？@2x？@3x？
前两小节中已经基本满足一部分的单位转换，但2010年在苹果的Retina屏幕的诞生后，无论是UI还是开发者，需要考虑的就不仅是px这个单位了，原因是苹果的Retina屏幕为了显示更精细，原本1个物理像素点大小的位置上能够显示2个像素点。像素的成倍增加导致原本320*480的物理尺寸上显示的像素达到640*960，此时假设UI做了一张还是320*480像素的全屏设计图，在Retina屏幕下则会被拉伸损耗掉一半（理论上的量化值）的清晰度。为了避免这种情况，@2x图应运而生，即UI直接把尺寸定为物理像素点的2倍大小640*960进行设计，前端开发时再把尺寸除以2得到物理像素的大小即可（实际显示依然是640*960的分辨率）。@3x的原理和使用是一样的，它是苹果出现plus系列后使用的1物理像素点显示3个像素点的方案，就不再多介绍了。
完善
综上，移动端的前端开发在更多情况下，要把@2x、@3x的概念和rem等结合起来，当UI以@2x为标准做图时，原本1倍大小的120px * 120px图片会切成240px * 240px，此时在前端就要计算为240÷2÷10 = 12rem，同理@3x标准时则为360÷3÷10 = 12rem。
rem还有很多学问，这篇只提到了一些皮毛，实际上很多时候还会结合媒体查询等方法使不同的屏幕达到更好的兼容，具体可以搜索参考一下例如淘宝、网易等大厂的实现方案。
网友评论