pc端后台页面根据分辨率自适应（vue）

需求：pc端后台页面根据分辨率自适应，使用rem单位可以自适应，如不想自适应还是用px。

代码：

在body里设置好默认的字号，如我的字号默认14px
那就在body添加0.14rem

在app.vue中

created() {
    
    
this.resizeFun()
},
methods: {
    
    
	resizeFun() {
    
    
      let docEle = document.documentElement,
          resizeEvt =
              'orientationchange' in window ? 'orientationchange' : 'resize',
          resizeFun = () => {
    
    
            let clientWidth = docEle.clientWidth;
            if (!clientWidth) return;
            // 100是换算系数，相当于1rem=100px
            //1920是作为设计图的基准，我这是按照1920*1080的分辨率，可自行修改
            docEle.style.fontSize = 100 * (clientWidth / 1920) + 'px';
          };
      if (!document.addEventListener) return;
      window.addEventListener(resizeEvt, resizeFun, false);
      window.addEventListener('DOMContentLoaded', resizeFun, false);
      resizeFun();
    },

}

换算方式：1rem=100px

使用：

• 想自适应用rem单位，如：如果设计图上是20px,换成0.2rem

• 不想自适应用px单位，原来是怎么写就怎么写，如：如果设计图上是20px，就还是20px

总结：这样的话就是想哪个地方自适应就把单位换一下就行了，灵活转换。也没必要使用postcss-px2rem，lib-flexible插件啥的了。但逻辑都是一样的。