3个点:
1.引入@njleonzhang/postcss-px-to-rem，将px转成rem，会根据根元素的fontsize进行变化
在package.json或者.postcssrc.js文件中配置
"postcss": {
"plugins": {
"autoprefixer": {},
"@njleonzhang/postcss-px-to-rem":
{ "unitToConvert": "px",
"viewportWidth": 1920,
"unitPrecision": 3,
"selectorBlackList": [ ".ignore", ".hairlines", ".wscn-http404", ".errPage-container", ".stock-index", ".stock-item" ],
"minPixelValue": 1,
"mediaQuery": false }
}
}
2.写个工具方法来修改根元素的fontsize
// 该方法根据设备的宽高比 与设计稿的比例进行换算，算出根元素的fontsize ，用特殊值法带入更便于理解
util.screenInit = function (screenRatioByDesign = 16 / 9) {
const docEle = document.documentElement
function setHtmlFontSize() {
var screenRatio = docEle.clientWidth / docEle.clientHeight
var fontSize = (
screenRatio > screenRatioByDesign
? (screenRatioByDesign / screenRatio) : 1 ) * docEle.clientWidth / 10
if (docEle.clientWidth >= 1100 && docEle.clientHeight >= 619) {
docEle.style.fontSize = fontSize.toFixed(3) + 'px'
} else {
docEle.style.fontSize = '110px'
}
}
setHtmlFontSize()
window.addEventListener('resize', setHtmlFontSize)
}
// 该方法修改像echarts插件内option配置时配置的fontsize的值
util.setSize = function (num) {
const fontSize = parseFloat(document.getElementsByTagName('html')[0].style.fontSize.replace('px'))
return num * fontSize / 192
}
3.页面内需要用flex等布局保持页面缩放时仍能垂直居中
