最近博主在研究更先进的mobileWeb页面自适应方法,以前是使用的定宽方法，看到网上有三篇文章《手机端页面自适应解决方案—rem布局》《手机端页面自适应解决方案—rem布局进阶版（附源码示例）》和《MobileWeb 适配总结》,也许博主理解能力太差了，第二篇文章的方法就是没掌握，第一篇文章的的方法作者说已经过时了，所以就不去细细探究了。最后，幸好学会了最后那篇文章的方法。
一句话概括使用方法:在页面头部尽早加载指定的JS文件，不要手动指定viewpoint。然后写入转换之后的尺寸（所有PX单位，不仅限于元素），其他布局照常进行。
页面单位换算方法说明：假设设计稿的宽度是640px,那么换算基准单位就是(640px/16px=40),也就是1rem=40px。如果元素是(100px*50px)，那么它换算之后的相对单位就(100px/(640px/16px)=2.5rem,50px/(640px/16px)=1.25rem)。这里的16px是大部分浏览器的默认字体的大小，换算的时候不能改变这个参数值。如果设计稿宽度是1000px,（100px*50px）相对单位就是(100px/(1000px/16px)=1.6rem,50px(1000px/16px)=0.8rem)，以此类推。
总结换算方法和单位：
元素的rem单位=元素在设计稿中实际测量px/(设计稿宽度px/16px)（这里的元素不仅是html元素,指代所有有px单位属性的元素或属性等）
也许你会说，每次写完px单位还要再换算成rem，是多么的麻烦啊。这个好解决，推荐使用sublime的一个插件cssrem,该插件默认换算单位是100，当然也可以自定义，比如上面的例子，设计稿是640px，换算单位是(640px/16px=40),因此只要先自定义设置好换算单位是40即可，然后再布局的时候输入元素的测量单位px值，就会自动的转换成rem单位。
附件是博主做的百度IFE的stage1，task11的习题，稍微有点瑕疵，习题地址：http://ife.baidu.com/task/detail?taskId=11
