前言

手机端开发，市场上手机尺寸各种各样，加上还有paid，所以手机端的适配很重要，就这几天我自己遇到的适配问题，解决方案：postcss-pxtorem和amfe-flexible配合使用，我先发一个纪录分享。

这次是h5页面开发，使用的是vue+vant构建项目，"vue": "^2.6.14","@vue/cli-plugin-babel": "~5.0.0","vant": "^2.12.51","amfe-flexible": "^2.2.1","postcss-pxtorem": "^6.0.0",

一、amfe-flexible、postcss-pxtorem是什么？

amfe-flexible：

????????可以自动给?< html >?设置font-size值为设备宽度的1/10

postcss-pxtorem：

????????rem方案虽然可以解决适配问题，但是如果UI设计稿使用的是px单位，自己转换成rem比较麻烦所以需要使用postcss-pxtorem，可以把px转换为rem

二、使用步骤

1.安装amfe-flexible

npm i amfe-flexible

2.配置：main.js

import 'amfe-flexible'

3.安装postcss-pxtorem

npm i postcss-pxtorem

?4.在项目根目录下新增配置文件postcss.config.js

module.exports = {
? ? ?plugins: {
? ? ? ? ?'postcss-pxtorem': {
? ? ? ? ? ? ?rootValue() {
? ? ? ? ? ? ? ? ?return 75;
? ? ? ? ? ?  },
? ? ? ? ? ? ?propList: ['*'],
? ? ? ?  },
? ?  },
?};

?5.兼容vant，设置postcss.config.js

????????如果使用了vant组件库，vant的设计稿是根据375px去设计的，为了避免冲突需要单独设置

module.exports = {
? ? ?plugins: {
? ? ? ? ?'postcss-pxtorem': {
? ? ? ? ? ? ?rootValue({ file }) {
? ? ? ? ? ? ? ? ?return file.indexOf('vant') !== -1 ? 37.5 : 75;
? ? ? ? ? ?  },
? ? ? ? ? ? ?propList: ['*'],
? ? ? ?  },
? ?  },
?};