基于vue的h5页面适配问题

用vue写了个h5页面，写的时候没有做字体适配，没有ui设计稿，参照着chrome浏览器调试中的6写的，写完后才想起来做适配。

解决办法：

1.安装依赖

npm install --save-dev postcss-px-to-viewport

2.配置postcss.config.js文件

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 375,   // 视窗的宽度，对应设计稿宽度
      unitPrecision: 5,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
    }
  }

3.贴个package.json的依赖图

"dependencies": {
    "axios": "^0.21.1",
    "core-js": "^2.6.5",
    "element-ui": "^2.15.2",
    "js-cookie": "^2.2.1",
    "path": "^0.12.7",
    "path-to-regexp": "^6.2.0",
    "postcss-px-to-viewport": "^1.1.1",
    "qs": "^6.10.1",
    "vue": "^2.6.10",
    "vue-router": "^3.5.2",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-plugin-component": "^1.1.1",
    "sass": "^1.35.1",
    "sass-loader": "^10.1.0",
    "script-ext-html-webpack-plugin": "^2.1.5",
    "vue-template-compiler": "^2.6.10"
  }

本项目是用HBuilderX创建的项目，做适配过程中并没有下载其他与postcss有关的的插件