React数据可视化大屏宽高自适应/响应式布局/屏幕适配大厂做法：css3 transform: scale(X)缩放

如果设计稿尺寸与实际屏幕分辨率比例相同，则可以满屏呈现。 

import React, { PureComponent } from 'react';
import {
  Row, Col,
} from 'antd';
import debounce from 'lodash.debounce';
import styles from './style.less';

const getScale = () => {
  const width = 1920, height = 1080; // 此处可以根据实际设计稿尺寸修改
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
}

class Comp extends PureComponent {

  state = {
    scale: getScale(),
  }

  setScale = debounce(() => { // debounce节流
    // 获取到缩放比，设置它
    let scale = getScale();
    this.setState({ scale });
  }, 500)

  componentDidMount() {
    window.addEventListener('resize', this.setScale);  // 得到呈现的屏幕宽高比
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setScale);
  }

render() {
    const width = 1920, height = 1080;
    // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
    const { scale } = this.state;
    return (
      <div
        className={styles['box']}
        style={
   
   {
          transform: `scale(${scale}) translate(-50%, -50%)`,
          WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
          width,
          height
        }}
      >
      ......
      </div>
}

style.less中的样式：

.box{
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}