經過js動態設置根元素的rem方案

rem目前是響應式開發移動端一個很重要也是經常使用的一個元素，可是在網上看的各類文章都會超級懵逼。因此我在下面給出兩個方案，也列舉出使用方法，讓你們一目瞭然。前提是設計稿以750爲準。其中測試的設計稿中標註此div的width:750px;height:200px;

方案一：

<script type="text/javascript">
  window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
    function c() {
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
    }
    c();
    return c;
  })(), false);
</script>
<style type="text/css">
  html{font-size:10px}
  *{margin:0;}
</style>

設計稿中標註此div的width:750px;height:200px;
換算爲rem,即爲width:18.75rem,height:5rem;
此時 1rem = 40px;將設計稿標註的寬高除以40便可獲得rem的值。

<div style="width:18.75rem;height:5rem;background:#f00;color:#fff;text-align:center;">
    此時在iPhone6上測試，width:375px，也即width:100%。
</div>

方案二：

<script type="text/javascript">
  !(function(doc, win) {
    var docEle = doc.documentElement, //獲取html元素
      event = "onorientationchange" in window ? "orientationchange" : "resize", //判斷是屏幕旋轉仍是resize;
      fn = function() {
        var width = docEle.clientWidth;
        width && (docEle.style.fontSize = 10 * (width / 375) + "px"); //設置html的fontSize，隨着event的改變而改變。
      };

    win.addEventListener(event, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);

  }(document, window));
</script>

<style type="text/css">
  html {
    font-size: 10px;
  }
  *{
      margin: 0;
  }
</style>

設計稿中標註此div的width:750px;height:200px;
換算爲rem,即爲width:37.5rem,height:10rem;
此時 1rem = 20px;將設計稿標註的寬高除以20便可獲得rem的值。

<div style="width:37.5rem;height:10rem;background:#f00;color:#fff;text-align:center;">
    test
</div>

以上兩種方案均爲經過js動態設置html的根元素的font-size的值來達到響應式的效果。

最後一個爲手淘的方案：

<meta content="yes" name="apple-mobile-web-app-capable">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

<!-- 設計稿依舊爲750px,此div在視覺稿中width：750px ;height:200px;   
       在此方案中 1rem == 75px 也就是說視覺稿中的px值除以75便可獲得rem的值。
-->
  <div style="width:10rem;height:2rem;background:#f00;color:#fff;text-align:center;">
    test
  </div>

本文爲原創文章，轉載請保留原出處，方便溯源，若有錯誤地方，謝謝指正。
原文連接：經過js動態設置根元素的rem方案