[JavaScript知识库]vue+echarts制作大屏利用css3 scale 进行屏幕自适应

制作大屏 设计图如果是16:9的ui图 并且大屏显示符合16:9 可采用css3的scale进行动态缩放达到高清还原设计图 前端实现就可以按照UI图px写代码了
1、resetScreenScale.js

import appConfig from './config/base'

export function pageResize () {
  let init = () => {
    console.log(window.innerHeight + "," + window.innerWidth);
    let _el = document.body;

    let hScale = window.innerHeight / appConfig.screen.height;
    let wScale = window.innerWidth / appConfig.screen.width;
    _el.style = `overflow:hidden;width:${appConfig.screen.width}px;height:${appConfig.screen.height}px;transform:scale(${wScale},${hScale});transform-origin:left top;`


  }
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  window.addEventListener(resizeEvt, init, false);
  document.documentElement.addEventListener('DOMContentLoaded', init, false);
  init()
}

2、base.js

export default {
  screen: {
    width: 1920,
    height: 1080,
    scale: 20
  }
}

3、main.js

import appConfig from './config/base.js';
Vue.prototype.appConfig = appConfig;

4、.vue引用

import { pageResize } from '../pages/intelligentoperation/resetScreenScale'
created () {
    pageResize()
  },

路径根据自己的改 js都是贴的全的

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖