vue项目实现屏幕自适应

一、安装插件

npm i lib-flexible -S

下载淘宝的flexible插件，-S为生产依赖

npm i px2rem-loader -D

下载将px转换成rem的插件，这样在写的时候就可以根据设计稿愉快的使用px啦，这个插件会自动帮我们转换

二、在入口文件main.js将lib-flexible插件引入

三、在vue.config.js中添加配置 

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem")
      .loader("px2rem-loader")
      .options({
        remUnit: 192 // 设计稿大小比例 / 10
      });
  },
}

remUnit属性用于设置设计稿除以10之后的大小

四、修改flexible.js 文件

全局搜索flexible.js，将refreshRem函数中原本的540替换为width，这样就实现了宽度根据屏幕大小自动适配

五、查看效果

以上全部设置完成后，重新启动项目就可以看见效果啦