vue 适配大屏解决方案

1、使用 postcss-px2rem

// .postcssrc.js 配置
"postcss-pxtorem": {
   "rootValue": 16,//根节点字体的大小
    "propList": ["*"]
}

//rem.js 
const baseSize = 16
// 设置 rem 函数
function setRem() {
    const scale = document.documentElement.clientWidth / 1920
     // let scale = document.documentElement.clientWidth || document.body.clientWidth;
     // 设置页面根节点字体大小 最大为baseSize的两倍
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem();
    console.log('kkjx')
}

在main.js 中引用rem.js

2、使用postcss-px2rem+lib-flexible

   // .postcssrc.js 配置
   "postcss-pxtorem": {
   	// rootValue的值是根据根据设计图的宽度决定的
   	//使用lib-flexible是默认分成十等份的 如果设计图是750的话 那个值就是75 同样的
   	//  这里我是按照10等分来划分的,大家也可以按照24等分的话就是80，但是一定记得要去改lib-flexible源码才可以
      "rootValue": 192,//根节点字体的大小
       "propList": ["*"]
   }

 // 自定义页面元素的fontsize，方便rem的配置
 function refreshRem(){
     var width = docEl.getBoundingClientRect().width;
     //屏幕信息，屏幕宽度，bound：绑定；rect：矩形
     // if (width / dpr > width) {//修改这里
     //     width = width * dpr;
     // }
     var rem = width / 10;
     docEl.style.fontSize = rem + 'px';
     flexible.rem = win.rem = rem;
 }

 // 自定义页面元素的fontsize，方便rem的配置
function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    //屏幕信息，屏幕宽度，bound：绑定；rect：矩形
    // if (width / dpr > 640) { //这里的意思是宽度大于640 fontSize不会再发生变化 可以按照自己的需求进行调整
    //     width = 640 * dpr;
    // }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

此时宽度用px就可以适配所以的网页大小了，高度也可以使用px去做自适应，但是前提是html,body等父元素的设置上100%，不然里面的元素写100%无法继承高度

但是需要注意的是行内样式设置的px无法被转换成自适应的rem

需要注意的点：lib-flexible给body元素加上了12px的字体大小，官方解释：body上设置12 * dpr的font-size值，为了重置页面中的字体默认值，不然没有设置font-size的元素会继承html上的font-size，变得很大
大家可以根据自己的项目需要来，如果不需要body加字号，可去源码中进行注销