Vue 移动端适配问题

1.推荐使用px2vw进行适配

1.安装postcss-px-to-viewport

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

2.跟目录中新建postcss.configs.js 配置如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 375, //视窗的宽度，对应我们设计稿的宽度，一般指retina（一个点两个像素），宽度750
      viewportHeight: 667, //视窗的高度，对应我们设计稿的高度，可以不配置
      unitPrecision: 5, //指定`px`转化成视窗单位值的小数位数（很多时候不能整除）
      viewportUnit: 'vw', //指定需要转换的视窗单位 建议'vw'
      selectorBlackList: ['ignore'], //指定不需要转换的类
      exclude: [/TabBar/], //指定不要转换的文件，数组内应该是正则表达式
      minPixelVaule: 1, //小于或者等于1px不转换为视窗单位
      mediaQuery: flase , //允许在媒体查询中转换'px'
      landscape: false,  // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // 横屏时使用的视窗单位
      landscapeWidth: 1134 // 横屏时使用的视窗宽度
    }
  }
}

2. 使用amfe-flexible + postcss-pxtorem 不推荐

1.安装 amfe-flexible 和 postcss-pxtorem

npm install amfe-flexible postcss-pxtorem --save

2.main.js中引入

import 'amfe-flexible';

3.跟目录中新建vue.config.js 配置：

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}