移动端适配

方案一： lib-flexible+postcss-pxtorem （rem适配）

实际是将px单位转换成了rem，在控制台看到的单位就是rem。若要写固定宽高不转换rem，单位用大写PX

1. flexible

   • 主要用来响应式改变根元素的字体大小
   • 安装命令 npm install lib-flexible - -save
   • main.js里面导入命令 import ‘lib-flexible’

postcss-plugin-px2rem配置内容：

// package.json 文件中 
"postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-plugin-px2rem": {
                "rootValue": 37.5  // 换算基数，1rem相当于10px,值为37.5时，
            }
        }
    }

// autoprefixer  自动补齐css3 前缀
// postcss-plugin-px2rem rem插件
// "rootValue": 37.5  // 换算基数，1rem相当于10px,值为37.5时，1rem为20px,淘宝的flex默认为1rem为10px

// 或者在vue.config.js文件中配置

moduule.exports = {
	css: {
		loaderOptions:{
			postcss:{
				plugins: [
					require('postcss-plugin-px2rem')({
						rootValue: 37.5, //换算基数，1rem相当于10px,值为37.5时,1rem为20px,淘宝的flex默认为1rem为10px 
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
					})
				]
			}
		}
	}
}

方案二： postcss-px-to-viewport

1. 安装 yarn add -D postcss-px-to-viewport

2. 配置参数

新建一个.postcssrc.js文件

module.exports = {
    plugins: {
        autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
        "postcss-px-to-viewport": {
            unitToConvert: "px", // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            include: /Test.vue/,    //如果设置了include，那将只有匹配到的文件才会被转换
            landscape: false, // 是否处理横屏情况
            landscapeUnit: 'vw',    //横屏时使用的单位
            landscapeWidth: 568     //横屏时使用的视口宽度
        }
    }
};

如果读取的是vant相关的文件，viewportWidth就设为375，如果是其他的文件，我们就按照我们UI的宽度来设置viewportWidth，即750。

const path = require('path');

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;

  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }

}

// 注意：这里使用path.join('node_modules', 'vant')是因为适应不同的操作系统，
// 在mac下结果为node_modules/vant，而在windows下结果为node_modules\vant