【css】rem及其替换方案

　　移动端的web前端开发其实经常会有一些令人头疼的问题，比如屏幕适配、1像素问题等，rem也是之前在屏幕适配上比较完善的一套方案，但是随着业务的深入，任何方案都有其优秀与不足的地方，rem这套方案也一样，笔者今就来从自身项目的角度，简单的聊聊rem这整套方案的得与失。

　　首先，介绍下原理：

　　rem是什么？它是css3新推出的相对单位，英文全称为font size of the root element，意思就是根据网页的根元素来设置字体大小，和另一个em(font size of the element)根据父元素的字体大小来者是不同，它是根据根节点，也就是html元素来设置大小，举个简单的例子：

html{
    font-size: 12px;
}
p{
    width: 1rem; //实际长度 1 * 12 = 12px;
}

　　也正由于这个机制，我们就能根据只改变根元素的fontSize这一个点的方式就能改变全局的设置了rem单位的元素的样式。

　　但是，正如前面提到的，没有什么方案是没有副作用的，rem也是有副作用的：

　　1、移动端对于浮点数的计算其实并不像pc那么精确。实际工作中我们经常会碰到根节点fontSize设置为10px，实际元素的属性值（如border: .1rem solid #000）有小数点的情况，这种情况下，虽然理论上的px值应该为1px，但是实际上很有可能就变成了0px(也就是视觉上不可见)，也就是这个原因，也导致了rem的borderRadius的设置的圆看着像椭圆，所以'px'这个单位在这个背景下还是有它自己的使用空间，虽然这看上去甚至有一些违背使用rem的初衷。

　　2、css绘制的图形可以rem，但是图片却不行。我们都知道，图片的清晰度需要在它的实际分辨率范围内才能够保证，如果任由rem设置图片宽高，被肆意拉伸的图片其实并不是我们想要的，所以在设置图片的时候还需要有另外的考量。

　　3、有关rootElemenet元素的fontSize，并不是一直都那么准确，也即这套方案是有兼容性问题的。笔者的实际工作中就发现，有一些比较“另类”的手机在使用rem的实际效果很奇怪，它们内部的计算颇有些令人发指，所以，即使大范围使用了rem作为主要单位，但是很多场景下，'%'这个比例单位还是有使用空间的。

　　说完了rem的功过，我们来聊一下替代方案：

　　笔者有了解过的方案有两套：

　　1、基于vh,vw的方案：

　　　　其实相关的单位总共有4个，vh、vw、vmin、vmax，它们统称为视窗（Viewport，也称作视口）单位，vw、vh分别表示相对于视窗宽度/高度的百分比（如1vw表示视窗宽度的1%），读到这里，聪明的读者应该就能想象，如果能相对于视窗的百分比来设置，不就是能够自适应各种屏幕了么？没错，看上去确实是这样，但是，再一细想还是会有不能覆盖的场景，比如fontSize（其实有没有想过，说不定委员会制定vh、vw、rem等单位，其实初衷是想结合使用？），而且本身也有一些兼容问题，所以实践得并不算太多。

　　2、基于meta中设置viewport scale的方案：

　　这个方案也是源于移动端那个著名的1像素问题，实现其实很简单，主要是这样：

<!--
    服务器端根据前端第一次请求页面时带的客户端信息，判断客户端是几倍屏，然后对应的设置viewport的scale
-->
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

　　这样设置了之后，就可以在样式中正常的使用'px'单位，但是在物理上它会表现为对应的实际像素，通过scale来弥补逻辑像素到物理像素的差异，将实际的使用场景拉回了之前的我们熟悉的“正常”场景，然后在需要适配的场景依然沿用之前的rem的方案，因为含有小数点的场景可以通过“真”的px去覆盖，几乎完整的补齐了rem的缺憾。

　　第一套方案因为有兼容性的隐形坑，所以实际使用得并不算多，而第二种方案，再结合rem可谓是当今的主流实现了，不过它本身也有一个小缺陷，这种设置相当于前端页面就需要服务端直出了（不过为了SEO，SSR其实也是大前端的时代的一个趋势吧），不能简单的发布静态页面。

　　简单的总结一下，其实移动端由于性能上和pc的一些差距和使用环境上的一些区别，在浏览器设计之初就会有一些针对移动端的做一些特殊的实现，本文简单总结了一些笔者最近在调研的一些适配方案，只是移动端这些“特性”的一些方面，而最近开始逐渐普及的android 7还有着更多的“特性”等着我们去适配，前端还是任重而道远。