1-按照这个链接先把两个依赖: postcss-pxtorem和amfe-flexible 装了，其中vue2的项目postcss-pxtorem要装5.0.0版本，不然会报错。
https://www.cnblogs.com/rzsyztd/p/14212513.html
1-
npm install postcss postcss-pxtorem@5.0.0 --save-dev
npm i lib-flexible
2-设置postcss
修改根目录下的postcss.config.js 文件（如果没有这个文件，可以手动添加一份）
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
// vant得设计稿是按照375设计的，而我们得设计稿是按照750来设计的，所以vant按37.5走，750的设计稿按75走，换算基准都是设计稿得十分之一，这是因为lib-flexible是将设计稿分为10分之一来做的适配
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};
3、引入 lib-flexible（两种方式都行，二选一）
3-1 在main.js中引入 lib-flexible 即可
// main.js
import 'lib-flexible'
3-2 也可以在 public/index.html 文件的 <head> 标签中引入
// public下的index.html
<script src="./node_modules/lib-flexible/index.js"></script>
4-重启项目，页面布局时正常写 px 即可
2-装完之后，在package.json里面加上
"postcss": {
"plugins": {
"autoprefixer": {
"overrideBrowserslist": [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
}
3-然后在assets下新建js/rem.js,内容为:
/* eslint-disable */
/**
* 移动端(手机端)页面自适应解决方案—rem布局
* @ 转化为px : rem = 37.5 : 1
*/
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = 12 * dpr + 'px'
} else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize()
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
})(window, document)
4-最后，样式中直接用px单位就好了，因为装的依赖pxtorem就是自动把px解析为rem。如果你的设计稿宽度为750px，那么写样式的时候就要把数字除以2，也可以在蓝湖中把设计稿宽度设定为375px，直接1:1写尺寸就行，就是可能会有细微差别。
版权声明：本文为bbt953原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。