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';
}

你可能感兴趣的:(js,vue,vue.js)