vue使用rem (手机端PC端通用)

只有PC端时 main.js

 

new Vue({
  router,
  store,
  render: h => h(App),
  created(){
    // 实例创建完成后被立即调用rem换算方法,解决内容闪现问题
        setRemPc();
        window.addEventListener('resize', setRemPc);//浏览器窗口大小改变时调用rem换算方法
    },
}).$mount('#app');

//rem计算
function setRemPc() {
  var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
  var bodyWidth = document.body.clientWidth;// 当前窗口的宽度
  var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}
//window.addEventListener('load', setRemPc);

 

只有手机端时 main.js

 

new Vue({
  router,
  store,
  render: h => h(App),
  created(){
    // 实例创建完成后被立即调用rem换算方法,解决内容闪现问题
        setRem();
        window.addEventListener('resize', setRem);//浏览器窗口大小改变时调用rem换算方法
    },
}).$mount('#app');

//rem换算 
 function setRem() {
    var whdef = 100 / 750; // 表示750的设计图,使用100PX的默认值
    var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
    var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
  }

 

pc端跟手机端在同一个项目时

 

new Vue({
    router,
    store,
    render: h => h(App),
    created(){
    // 实例创建完成后被立即调用rem换算方法,解决内容闪现问题
        
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
           setRem();
           window.addEventListener('resize', setRem);//浏览器窗口大小改变时调用rem换算方法
          }
          else{
             setRemPC()  
             window.addEventListener('resize', setRemPc);//浏览器窗口大小改变时调用rem换算方法
          }
    },
}).$mount('#app');
   
 // 手机端
    function setRem() {
      var whdef = 100 / 750; // 表示750的设计图,使用100PX的默认值
      var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
      var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
    }
   //pc端
    function setRemPC() {
      var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
      var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
      var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
    }

 

页面使用(index.vue)

 

  <!-- 普通写法 -->

  <!--html:-->

          <div class="title">签到成功</div>

<!--css:-->

    .title {

    font-size: 16px;

    font-family: PingFangSC-Medium, PingFang SC;

    font-weight: bold;

    color: #242e42;

    margin-bottom: 10px;

  }

  <!-- 转换rem后的写法 -->

  <!--html:-->

          <div class="title">签到成功</div>

<!--css:-->

    .title {

    font-size: 0.16rem;//16px写成0.16rem是因为我们在main.js设置了1920的设计图,使用了100px的默认值,所以我们在转换的时候直接用设计图的px值除以100就是现在的rem值(例:16px/100=0.16rem)

    font-family: PingFangSC-Medium, PingFang SC;

    font-weight: bold;

    color: #242e42;

    margin-bottom: 0.1rem;

  }

 

标签：vue,whdef,PC,宽度,bodyWidth,rem,var,document
来源： https://www.cnblogs.com/lengfang/p/16623416.html