The main point of h5 font scaling on the mobile terminal
1. The unit of postcss-px-to-viewport in the vue project is rem
"postcss-px-to-viewport": {
"viewportWidth": 750,
"unitPrecision": 3,
"minPixelValue": 1,
"fontViewportUnit": "rem",
"selectorBlackList": [
".van-"
]
}
2. The created adding method of app.vue in the project
// 客户端宽度
const clientWidth = document.body.clientWidth
let scale = 1
// 获取app字体调整缩放大小 赋值给scale 一般是 1.0 1.1 1.2倍等
document.getElementsByTagName("html")[0].style.fontSize = clientWidth * scale / 100 + "px"
The above method has actually been achieved to achieve the effect of h5 font scaling. However, the design draft of the project is 750. The mobile terminal project is useful for vant. The design draft of vant is 375. The configuration of point 1 causes the vant component of the project to be unable to be Scaling the font size,
"selectorBlackList": [
".van-"
]
configuration is removed and the font related to vant is half smaller, so it depends on the 3 point configuration
3. Create a new .postcssrc.js file, add some content, you can perfectly solve the trouble of using vant components in 750 design
module.exports = ({
file }) => {
let vantFlag = file && file.dirname && file.dirname.indexOf("vant") > -1;
let rootValue = vantFlag ? 375 : 750; // 判断条件自行调整
return {
plugins: {
autoprefixer: {
},
"postcss-px-to-viewport": {
"viewportWidth": rootValue,
"unitPrecision": 3,
"minPixelValue": 1,
"fontViewportUnit": "rem",
"selectorBlackList": [
]
}
}
}
}