pc端自适应不同屏幕

1.最好使用百分比来设置
2.使用插件lib-flexible.js 可以自动计算屏幕的宽度，从而设置相应的html的font-size
3.根据html的font-size来设置元素的大小宽高；

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;//宽度为屏幕宽度
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
    rem的大小是屏幕的宽度除以10;
    每个屏幕这个都是一个固定值；
    所以我们可以根据这个尺寸作为参照物，从而来画我们的设计稿；
 

4.设计稿是多少我们就设置多少；

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 把px单位换算成rem单位
          require("postcss-pxtorem")({
            rootValue: 192, // 换算的基数(设计图1920)
            selectorBlackList: [".van"], // 要忽略的选择器并保留为px。
            propList: ["*"], //可以从px更改为rem的属性。
            minPixelValue: 2, // 设置要替换的最小像素值。
          }),
        ],
      },
    },
  },
};

这个时候我们按照设计稿中的实际宽度px来画我们的样式；
最后会将px转成rem；