計算rem單位

<script type="text/javascript">
        // 獲取像素比值
        var num = 1 / window.devicePixelRatio;
         //根據像素比值生成視口標籤---有問題--字體在移動端大小不同
       //  document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale='+num+', maximum-scale='+num+', minimum-scale='+num+'">');
          //獲取屏幕十分之一的寬度
          var fontSize = document.documentElement.clientWidth / 10;
           //設置字體
           document.getElementsByTagName("html")[0].style.fontSize = fontSize + 'px'; 
    </script>

這時1rem = fontSize;你的設計稿寬是750px;上面的一個圖標寬是75px;在設計稿中它佔十分之一。也就是在任何顯示器下都佔十分之一。這樣就刻意作到兼容了。圖標的寬應該是75/75 rem;（爲何是除以75，由於fontSize取的是十分之一）。這裏實際寬度/設計稿十分之一的寬度的比值是固定的。可是rem是根據設備視口變化的，因此用這個來兼容各個設備。

在這裏爲何是屏幕的十分之一呢，其實不是特別固定，除以11,12,8,9都行，是用來兼容iPhone4的屏幕的。

下面這種也能夠

<script>
            function Rem() {
                var docEl = document.documentElement,
                oSize = docEl.clientWidth / 7.2;
                console.log(docEl.clientWidth);
                console.log(oSize);
                if (oSize > 100) {
                    oSize = 100; 
                    console.log("oSize");
                }
                docEl.style.fontSize = oSize + 'px';
                return oSize;
            }
            window.addEventListener('resize', Rem, false);
            Rem();
        </script>