使用vue移动端实现自适配-优快云博客

本文详细介绍如何通过amfe-flexible库实现移动端页面的REM布局适配，包括安装配置、引入方式及postcss-pxtorem插件的使用，确保不同设备上的显示效果一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先把安装amfe-flexible，这里使用npm install
npm i -S amfe-flexible
复制代码2.在入口文件main.js中引入
import ‘amfe-flexible/index.js’
复制代码3.在根目录的index.html 的头部加入手机端适配的meta代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
复

制代码4.安装postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem
ps：前提是ui设计的psd图尺寸大小是7501334，这样我们在iphone6的模拟机上直接使用所标注的尺寸
npm i postcss-pxtorem --save-dev
复制代码5.在package.json配置
“postcss”: {
“plugins”: {
“autoprefixer”: {
“browsers”: [
“Android >= 4.0”,
“iOS >= 7”
]
},
“postcss-pxtorem”: {
“rootValue”: 37.5,
“propList”: [
""
]
}
}
},
复制代码或者在postcss.config.js中配置（此文件需要在根目录下新建）
const autoprefixer = require(‘autoprefixer’)
const pxtorem = require(‘postcss-pxtorem’)

module.exports = ({ file }) => {
let rootValue
// vant 37.5 link
if (file && file.dirname && file.dirname.indexOf(‘vant’) > -1) {
rootValue = 37.5
} else {
rootValue = 75
}
return {
plugins: [
autoprefixer(),
pxtorem({
rootValue: rootValue,
propList: [’*’],
minPixelValue: 2
})
]
}
}