vue-cli3.0移动端屏幕适配

vue-cli3.0移动端屏幕适配

vm vh适配方案
npm i postcss-px-to-viewport -save -dev
配置package.json

"postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-px-to-viewport": {
                "viewportWidth": 750,
                "minPixelValue": 1
            }
        }
    }

配置项：
“viewportWidth”: 750, // 设计稿的宽度
“unitPrecision”: 3, // px转成vw、vh后小数点保留的位数
“minPixelValue”: 1, // 不转化为vw的最小px值

rem 适配方案
postcss-pxtorem + lib-flexible
1。yarn add lib-flexible
2。入口文件main.js中：import ‘lib-flexible/flexible.js’

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 5.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}