可视化大屏适配方案

1、媒体查询、最大宽度和最小宽度设置屏幕宽度范围

 /* 设置屏幕宽度范围外，根元素的font-size */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42.66px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

.large-screen-container {
  min-width: 1024px;
  max-width: 1920px;
  min-height: 780px;
}

2、实现rem适配flexible.js

(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 24
  function setRemUnit() {
    var rem = docEl.clientWidth / 24
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

3、main.js 引入flexible.js

import "@/utils/flexible";

4、安装postcss-plugin-px2rem

npm i postcss-plugin-px2rem --save

5、配置vue.config.js，将px转为rem

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 75,
            mediaQuery: true,
            exclude: /node_modules|public/
          })
        ]
      }
    },
  }
}

6、echarts适配

window.addEventListener("resize", function () {
  chart && chart.resize();
});