项目大屏

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