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