移动端rem自适应设置

现在移动端自适应适配方案有很多，rem是现在比较流行的移动端适配方法，个人还是比较喜欢的。

rem就是以html根元素的字体大小为参考，比如html:font-size:20px;1rem=20px;2rem=40px.....，因为移动端的屏幕特殊之处，主要是不同类型手机像素比dpr的不同，所以不能直接使用px来进行设置元素的尺寸，这里就需要引入一个可以兼容各种尺寸的解决方案，rem便是很好的一个，而对于rem的设置，我们是通过javaScript动态来设置，通过获取设备屏幕的宽度来计算，具体代码入下：

(function() {
    var html = document.documentElement;
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width / 15 + 'px';//至于除数15可自行设置
    //1rem=50;
})()

html.style.fontSize = width / 15 + 'px'；除数15的设置有点讲究，主要看UI出的设计图纸宽度，目前来说通常以iPhone6的屏幕尺寸来设计，也就是宽度750px，这里除以15后，1rem = 50px；主要是方便计算；对于设计图纸不同的话，建议依图确定除数的值。

这边按照设计图的宽度计算好1rem的值，接下来我们就可以正常的按照设计图的尺寸的px值，进行和pc端一样写页面了。

小提示：计算好rem值后，加入一个元素的宽高为50px，我们口头计算就知道是1rem，可如果是18px呢，那就是18/50，这多麻烦，在这里推荐个sublime插件，自动转换。

插件地址:px转换rem