<script>
        (function (doc, win) {
            var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
              recalc = function () {
                  var clientWidth = docEl.clientWidth;
                  if (!clientWidth) return;
                  docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

              };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

    </script>
 

先貼一段程式碼由於手機螢幕大小不一。在設計一個手機端頁面的時候，我們需要考慮到在每個手機下看到的元素比例一模一樣。於是傳統的PX 捨棄掉了，採用rem，rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。

於是我們通過一段JS程式碼，來初始化rem的大小，根據rem來使各個螢幕下的rem大小不同。