移动端适配之rem

rem是相对于根元素的字体大小，也就是说，我们只需动态改变根元素的字体大小，即可以适配各类手机，
js代码如下：

var html = document.documentElement;var width = html.clientWidth;html.style.fontSize = width / 16 + 'px'

html.style.fontSize = width / 16 + ‘px’ 除以16是根据自己的需求定的，这个值可以修改，因为我的设计图是 640*h ，方便计算所以取16；

下面具体说明，假如设计图纸为640 * h(高度auto),设计图上的字体为30px，对应html界面的字体则为30 / 40=0.75rem;
推算过程如下：

16rem y
——- = ——- => y=0.75rem;
640px 30px

(640px为设计图宽度，30px为设计图字体大小，16rem为html界面宽度);
如果是其他宽度的设计图，我就不多说了，都懂得哦！

到这里，其他像宽度，margin转rem也是一样的，640px的设计图为16rem,如果其他怎么计算，我想都懂的。

但是每个px值手动计算是很麻烦的，那有什么快捷的办法没有？当然，方法有很多，如sublime可以安装插件（CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件）；还有HBuilder自带的转换，设置如下，在 工具—选项–HBuilder–代码助手设置–px转rem,输入对应的值就行（此处我的输入40）；

下面附上我以前重构的demo(没有加js)的链接(包括设计图)：
http://images-lm.oss-cn-hangzhou.aliyuncs.com/wap_demo.zip

另外，关于flexible适配，我认为一个不错的分享：
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

如有不足或错误的地方，望交流指正；qq:1033256773