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

2022-08-25 10:30:10 阅读：185 来源： 互联网

标签：vue whdef PC 宽度 bodyWidth rem var document

只有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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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