rem自动适配

rem.js

 (function(win){
     let doc=win.document;
     let docEl=doc.documentElement;
     let tid;
     function refreshRem(){
       //获取屏幕宽度
       let width=docEl.getBoundingClientRect().width;
       //将屏幕宽度分成7.5份,1份是1rem
       let rem=width/7.5;
       //设置根节点字号
       docEl.style.fontSize=rem+'px'
     }
     refreshRem()
     //屏幕比例改变时
     win.addEventListener('resize',function(){
         clearTimeout(tid)
         tid=setTimeOut(refreshRem,10)
     })
     //会话框改变时(包括页面前进后退)
     win.addEventLisener('pageShow',function(){
         clearTimeout(tid)
         tid=setTimeOut(refreshRem,10)
     })
  })(window)

main.js中引入即可import '@/assets/js/rem.js'

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容