vue移动端rem适配

一、安装两个包

npm install lib-flexible postcss-px2rem 

二、去掉index.html的meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">

三、引入lib-flexible到main.js

import 'lib-flexible'

四、在vue.config.js配置

  // rem 的配置
  css: {

    loaderOptions: {

      css: {},

      postcss: {

        plugins: [

          require('postcss-px2rem')({

            // 适配 375 屏幕, 设计图750中量出来的尺寸要 / 2

            // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库

            remUnit: 37.5

          })

        ]

      }

    }

  }