移动端适配

之前有一种流行已久的移动端适配方案，那就是rem。
const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector(‘html’).style.fontSize = deviceWidth / 7.5 + ‘px’;
设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为120px40px，那么开发者对应的写成1.2rem0.4rem就可以了。
但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为100时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有50的，有16的，很多已经严重超出口算力所能及的范畴了。所以后来诞生的px-to-rem或者px2rem就是为了解决这个问题。

一、vue中使用postcss-plugin-px2rem插件
1、npm i postcss-plugin-px2rem --save-dev
2、在postcss.config.js里配置

温馨提示： rootValue这个配置项的数值是多少呢？ rootValue默认是100，通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把rootValue设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。（iPhone界面尺寸：320 * 480、640 * 960、640 * 1136、750 * 1334、1080 * 1920等。）
像vant、mint-ui这样的第三方UI框架，因为第三方框架没有兼容rem，用的是px单位，将rootValue的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原vant、mint-ui的组件，否则会样式会有变化，例如按钮会变小。

或在vue.config.js中配置，但是这种无法兼容vant这些ui库，所以不推荐在这里配置

二、vue项目中使用postcss-px-to-viewpor插件
postcss-px-to-viewport就是这样一款优秀的插件，它解决了以上提到的痛点，也满足以上提到的理想要求。它将px转换成视口单位vw，众所周知，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth
1、 安装依赖 npm i postcss-px-to-viewport -D
2、在项目根目录下添加.postcssrc.js文件
3、配置
module.exports = {
plugins: {
autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
“postcss-px-to-viewport”: {
unitToConvert: “px”, // 要转化的单位
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度
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/], // 设置忽略文件，用正则做目录名匹配
landscape: false // 是否处理横屏情况
}
}
};

注：propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: [‘wrap’],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换
4、重新运行项目，使配置文件生效。

三、如果vant想使用viewpor，需要兼容
vant团队的是根据375px的设计稿去做的，理想视口宽度为375px。需要修改viewportWidth

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

需要注意的是：上述配置是脚手架自动生成的文件（并不是自己创建的），即在构建项目时，将babel的配置成单独的文件才可以，否则只能用package.json方式来配置。
（1）如果再构建项目的时候选择将babel配置单独的文件，那么项目会自动生成：.eslintrc.js postcss.config.js babel.config.js .browserslistrc

（2）如果在构建项目的时候没有将babel单独配置，那么就是不能通过创建postcss.config.js 文件的形式配置，项目里没有对postcss等文件的引用和处理，自定义的postcss.config.js 也就没有效果
必须通过package.json配置
“postcss”: {
“plugins”: {
“autoprefixer”: {},
“postcss-px2rem-exclude”: {
“remUnit”: 100,
“exclude”: “/node_modules|floder_name/i”
}
}
},
或者
需要安装postcss-loader这个loader后，在项目根目录新建postcss.config.js这个文件，删除package.json中的postcss配置