通过js动态设置根元素的rem方案

唔，没找到里面怎么对代码格式化，如果大家看这个不舒服的话，也可以去segmentfault里面看，地址：https://segmentfault.com/a/1190000007736692
rem目前是响应式开发移动端一个很重要也是常用的一个元素，但是在网上看的各种文章都会超级懵逼。所以我在下面给出两个方案，也列举出使用方法，让大家一目了然。前提是设计稿以750为准。其中测试的设计稿中标注此div的width:750px;height:200px;

方案一：

设计稿中标注此div的width:750px;height:200px;
换算为rem,即为width:18.75rem,height:5rem;
此时 1rem = 40px;将设计稿标注的宽高除以40即可得到rem的值。

    此时在iPhone6上测试，width:375px，也即width:100%。

方案二：

设计稿中标注此div的width:750px;height:200px;
换算为rem,即为width:37.5rem,height:10rem;
此时 1rem = 20px;将设计稿标注的宽高除以20即可得到rem的值。

    test
  

以上两种方案均为通过js动态设置html的根元素的font-size的值来达到响应式的效果。

最后一个为手淘的方案：

  

    test
  

瑾瑜.2016.12.08 14:02

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。