1.首先把安装amfe-flexible，这里使用npm install
npm i -S amfe-flexible
2.在入口文件main.js中引入
import 'amfe-flexible/index.js'
3.在根目录的index.html 的头部加入手机端适配的meta代码
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-
scalable=no">
4.安装postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem
ps：前提是ui设计的psd图尺寸大
小是750*1334，这样我们在iphone6的模拟机上直接使用所标注的尺寸
npm i postcss-pxtorem --save-
dev
5.在package.json配置 (vant 37.5)
"postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"Android >= 4.0",
"iOS >= 7"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
},
或者在vue.config.js中配置(此文件需要在根目录下新建)
const autoprefixer =
require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
css:
{
loaderOptions: {
postcss: {
plugins: [
autoprefixer({
browsers: ['Android >= 4.0', 'iOS >= 7']
}),
pxtorem({
rootValue: 37.5,
propList: ['*'],
})
]
}
}
}
};
温馨提示： rootValue这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简
单，便于开发。假如设计图给的宽度是750，我们通常就会把rootValue设置为75，这样我们写样式时，
可以直接按照设计图标注的宽高来1:1还原开发。(iPhone界面尺寸：320 * 480、640 * 960、640 *
1136、750 * 1334、1080 * 1920等。)
那为什么你在这里写成了37.5呢？？？
之所以设为37.5，是为了
引用像vant、mint-ui这样的第三方UI框架，因为第三方框架没有兼容rem，用的是px单位，将rootValue
的值设置为设计图宽度(这里为750px)75的一半，即可以1:1还原vant、mint-ui的组件，否则会样式会
有变化，例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半
如果觉得《html上的样式 ui vant_解决vue中组件库vant等ui组件库的移动端适配问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
