vue设置页面Rem值

147 阅读1分钟

开发一个PC端大屏数据展示系统 要考虑到网页适应缩放问题,网页使用rem来进行等比缩放

 setSize(){
      let docElem = document.documentElement;
      let docWid = docElem.getBoundingClientRect().width//获取页面宽度

      if(docWid<1280){
        docElem.style.fontSize=1280/16 + 'px'//设置一个页面最小宽度并计算出页面rem,并赋值
      }else{
        docElem.style.fontSize = docElem.getBoundingClientRect().width / 16 + "px";//计算出页面rem,并赋值
      }
      // console.log('docElem.style.fontSize',docElem.style.fontSize)
    }

配合上监听页面宽度变化 实现等比缩放