基于vue-cli3的vue项目移动端样式适配

rem 布局 - 插件 postcss-pxtorem的配置

1. 安装插件

   npm i lib-flexible postcss-px2rem

2. 在 public 中的 index.html 中删除 meta 标签

   flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。

3. 在 src / main.js 中导入插件包

   // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size
   import 'lib-flexible'

4. 配置 vue.config.js

   module.exports = {
     devServer: {
       port: 3000,
       open: true
     },
     // rem 的配置
     css: {
       loaderOptions: {
         css: {},
         postcss: {
           plugins: [
             require('postcss-px2rem')({
               // 适配 375 屏幕, 设计图 750中量出来的尺寸要 / 2
               // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 UI 库
               remUnit: 37.5
             })
           ]
         }
       }
     }
   }

5. 样式中直接写px单位，postcss-px2rem插件会将其自动转换为rem单位