H5开发之适配方案

amfe-flexible：配置可伸缩布局⽅案，主要是将1rem设为 viewWidth/10
postcss-pxtorem：基于postcss的插件，⽤于将像素单元⽣成rem单位（px检测区分大小写，也就是说Px/PX/pX不会被转换，可以用这个方式避免转换成rem）
（拓展：postcss：css编译工具，可使用下一代css语法，自动补全浏览器前缀，px转rem，代码压缩等操作）

方案：amfe-flexible + postcss-pxtorem

1、安装

npm install amfe-flexible -S
npm install postcss-pxtorem@5.1.1 -D

2、在man.js中引入

import 'amfe-flexible/index'

3、在vue.config.js中进行配置

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 把px单位换算成rem单位
          require('postcss-pxtorem')({ 
            rootValue: 37.5, // 设计稿宽度的1/10;vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
            propList: ['*'] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
          })
        ]
      }
    }
  }
}

4、或者是创建postcss.config.js配置文件

module.exports = {
    plugins: {
        autoprefixer: {},
        // 把px单位换算成rem单位
        "postcss-pxtorem": {
            "rootValue": 75, // 设计稿宽度的1/10;vant官方使用的是37.5
            "selectorBlackList": ['vant', 'mu'], // 忽略转换正则匹配项
            "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
}

5、最后设置meta标签

链接：H5开发meta设置