3個點:
1.引入@njleonzhang/postcss-px-to-rem隶垮，將px轉(zhuǎn)成rem，會根據(jù)根元素的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
// 該方法根據(jù)設(shè)備的寬高比 與設(shè)計稿的比例進行換算，算出根元素的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插件內(nèi)option配置時配置的fontsize的值
util.setSize = function (num) {
? const fontSize = parseFloat(document.getElementsByTagName('html')[0].style.fontSize.replace('px'))
? return num * fontSize / 192
}
3.頁面內(nèi)需要用flex等布局保持頁面縮放時仍能垂直居中
