YULIN

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。元素的尺寸根据设计图的宽度换算即可。