web移动端rem适配代码

在<head>中插入js代码

<script>
       (function (docs, win) {
           var docEls = docs.documentElement,
               resizeEvts = 'orientationchange' in window ? 'orientationchange' : 'resize',
               recalcs = function () {
                   win.rem = docEls.getBoundingClientRect().width / 25;
                   docEls.style.fontSize = win.rem + 'px';
               };
           setTimeout(recalcs,1)
           if (!docs.addEventListener) return;
           win.addEventListener(resizeEvts, recalcs, false);
       })(document, window);
   </script>

在全局样式表中插入css代码

<style>
           body,html{
               margin: 0;
               padding: 0;
               font-family: -apple-system,Helvetica,sans-serif;
               -webkit-font-smoothing: antialiased;
               -moz-osx-font-smoothing: grayscale;
               -moz-user-select: none;
               -webkit-user-select: none;
               -ms-user-select: none;
               user-select: none;
               background-color: #f6f7f9;
               height: 100%;
               max-width: 36rem;
               margin: 0 auto;
               position: relative;
           }
 </style>

在本代码下，最大宽度为36rem。元素的尺寸根据设计图的宽度换算即可。