vue项目使用element-ui如何自使用不同设备的屏幕

使用vue-cli脚手架搭建项目，并且使用第三方的UI库（比如vant，mint ui）的时候，因为第三方库用的都是用px单位，无法使用rem适配不同设备的屏幕。

1、安装插件

npm install px2rem-loader --save-dev

2、修改配置文件

在build的utils.js文件里面添加如下配置信息

//自适应各类屏幕
var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75     // (这里是指设计稿的宽度为 750 / 10)
  }
}
//自适应各类屏幕

3、然后在generateLoaders函数里面插入px2remLoader 

4、把px转换成rem的配置完成后，还需要在入口文件（main.js）里面配置一段代码，此代码的目的是监听window窗口大小的变化，从而动态改变html根节点的font-size的大小。达到适配不同设备的效果；（注意：不知道为什么要动态改变html根节点的font-size的话，建议去看一下rem的知识） 

window.onresize = setHtmlFontSize;
function setHtmlFontSize(){
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';
};
setHtmlFontSize();

 然后重启项目！

记得换成自适应的布局格式