其他分享
首页 > 其他分享> > vue中使用rem的方式之一

vue中使用rem的方式之一

作者:互联网

new Vue({
  router,
  store,
  render: h => h(App),
  created () {
    // 实例创建完成后被立即调用rem换算方法,解决内容闪现问题
    setRemPc();
    window.addEventListener('resize', setRemPc);//浏览器窗口大小改变时调用rem换算方法
  }
}).$mount('#app')
//rem计算
function setRemPc () {
  var whdef = 30 / 1920;// 表示1920的设计图,使用100PX的默认值
  var bodyWidth = document.body.clientWidth;// 当前窗口的宽度
  var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}

标签:vue,方式,whdef,setRemPc,1920,bodyWidth,rem,var
来源: https://blog.csdn.net/weixin_45818024/article/details/120180075