Vue移动端基于rem适配方案（简单易懂，无脑复制粘贴）

Vue移动端基于rem适配方案

—— 相关npm包简述
lib-flexible ：由淘宝团队整出的一种弹性布局方案，是一个制作H5适配的开源库
postcss-loader：使用 PostCSS的方式处理css
postcss-px2rem：用于将 px 转换为 rem 的插件
postcss-px2rem-exclude：postcss-px2rem不能忽略指定文件，此包用于增加排除

注意：仔细看各段小标题！！！！！！

npm安装

npm install --save lib-flexible
npm install --save-dev postcss-loader postcss-px2rem
npm install postcss-px2rem-exclude -S

在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

在项目public目录的index.html头部加入手机端适配的meta的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

在全局创建postcss.config.js配置文件，添加相应配置

module.exports = {
    
    
  plugins: {
    
    
    autoprefixer: {
    
    },
    "postcss-px2rem-exclude": {
    
    
      "remUnit": 75, //配置rem基准值，75是iphone6、7、8标准
      /*
      remUnit: 在postcss-px2rem中对你设置px转化为rem，
      例如：width: 750px, remUnit = 75 。 
      页面渲染完成后，你会发现， width : 10rem; 750/75 =10。 所以你要保证 基准值 和remUnit对值始终一致，这样才能将html font-size和px建立正确对关系
    */
      "exclude": /node_modules/i //排除node_modules文件夹里的东西
    }
  }
}

到这里就结束了，后续还会更新vue全家桶相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！