计算rem单位

2019独角兽企业重金招聘Python工程师标准>>>

<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>

转载于:https://my.oschina.net/u/2879089/blog/983065