写在前面

现在手机发展迅猛，屏幕大小不一，在刚刚做手机端项目的时候，页面的自适应就成了一个难题。首先，使用px肯定是行不通的，那么我刚开始用的是em，但是随着项目的深入，em的缺陷就暴露无遗了，我总结有以下两点：

1.em单位基准值的确定及换算

em是相对长度单位。相对于当前对象内文本的字体尺寸。

上面是百度到的对em的定义，如果你没有对当前元素设置font-size属性，那么它就会默认继承其父级元素的font-size属性。可想而知，当html结构层层嵌套的时候，当前元素em的基准值是多少以及之后的换算会是一件很烦的事，工作效率很低。

2.em单位的基准是当前元素字体大小而非屏幕宽度

我们所谓的自适应，应当是根据设备屏幕宽度适应，而em单位归根究底，它的基准是当前元素字体大小，而不是屏幕的宽度。

 

rem的使用

那么很自然的，就学习到了使用rem这个单位。rem是css3中的一个新属性，官方对它的表述是“font size of the root element”。翻译过来就是相对根元素的字体大小的单位，和em相同，它也是一个相对单位，但和em不同的是，它是相对于根元素的。这个特性决定了，利用它可以使网页等比例适配所有屏幕，可以说是web app制作的利器。

关于rem其实用法有很多，但我在开始的时候使用了很愚蠢的一种，当时有这么一个项目，只要求移动端ios手机设备的适配。所以我就写了以下的一套media query

html { font-size: 20px; } @media screen and (max-width: 320px) { html { font-size: 17px !important; } } @media screen and (min-width: 414px) { html { font-size: 26.6667px !important; } }

当时的设计稿是750的，也就是基于iphone6设计的。我这种写法的缺点其实就一目了然了，首先，局限性很强，就是专门给ios手机做的。再一个，换算很累，rem值等于设计值除以40，工作效率可想而知。所以现在回头来看，确实比较蠢。。。于是我就去请教百度了。

我找到了网友流云诸葛的这一篇博客  从网易与淘宝的font-size思考前端设计稿与工作流

文章很好的总结了网易以及淘宝的一些做法，其中网易的做法，就可以比较好的解决我之前代码的两个缺点，代码如下：

// 根据不同设备的屏幕宽度，设置根元素font-size
// 以设计稿750宽为例
// 这样rem的值就等于设计稿值除以100
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

然后我又看到了淘宝的方案，它还给我们提供了一个开源的解决方案  github地址

淘宝的做法不光动态设置根元素font-size，还通过缩放viewport来达到效果。我后来去看了源码，觉得这套方案非常的不错，下一篇博客就准备讲一讲淘宝的这套方案。