rem实现自适应的原理

rem实现自适应的原理

• 开发时根据设计图上尺寸（比如1366*768）来开发，比如量的20px，就写成20rem
• 1rem代表设计图尺寸上的1px
• 如果在大屏设备上显示（比如1920*1080），那么1rem 代表 1920/1366=1.4px
• 所以在 设计稿上量的 20px，在大屏上的尺寸是 1.4*20=28px
• 这样就实现了自适应，屏越大，元素等比例增加，反之屏越小，元素等比例减小

 (function(win) {
     var tid;
     function refreshRem() {
         let designSize = 1366; // 设计图尺寸
         let html = document.documentElement;
         let wW = html.clientWidth;// 窗口宽度
         let rem = wW * 1 / designSize;
         document.documentElement.style.fontSize = rem + 'px';  // 这句是重点代码
     }

     win.addEventListener('resize', function() {
         clearTimeout(tid);
         tid = setTimeout(refreshRem, 300);
     }, false);
     win.addEventListener('pageshow', function(e) {
         if (e.persisted) {
             clearTimeout(tid);
             tid = setTimeout(refreshRem, 300);
         }
     }, false);

     refreshRem();

 })(window);