项目大屏 - 简书

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等布局保持页面缩放时仍能垂直居中