vue項目利用px2rem適配不同屏幕

項目創建好之后，實現步驟：

1、使用命令插入插件：npm install px2rem-loader

2配置util.js文件

exports.cssLoaders中添加

var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 100
  }
}

引用

const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

3、index.html文件配置

window.onresize = function () {
  rem();
}
window.onload = function () {
  rem();
}
function rem() {
  let whdef = 100/1920;// 表示1920的設計圖,使用100PX的默認值
  let html = document.documentElement;
  let wW = html.clientWidth;// 窗口寬度
  console.log(wW)
  let rem = wW * whdef;// 以默認比例值乘以當前窗口寬度,得到該寬度下的相應FONT-SIZE值
  document.documentElement.style.fontSize = rem + 'px';
  document.body.style.fontSize = '16px';
}

4、css文件直接使用px設置就好

注意：設置成功之后依舊不起作用怎么辦？檢查css引入方式，我自己直接使用link標簽在index.html文件中直接引入css，發現設置的沒有起作用，檢查發現css引入方式不正確！
正確的引入方式應該在main.js中引入css:

require('@/assets/css/common.css')
require('../static/css/index.css')
css文件放在何處無所謂.