pc端大屏自适应

• react版本

按1920/1080的比例进行缩放比例的换算，本地屏幕的宽高取innerWidth和innerHeight
在需要进行大屏适配的页面添加如下代码,大屏内部的计算单位直接使用px就可以了

//1、计算scale值，并存储在state中
getScale = () => {
    const width = 1920,
          height = 1080;
    let ww = window.innerWidth / width;
    let wh = window.innerHeight / height;
    return ww < wh ? ww : wh;
  };
  constructor(props) {
    super(props);
    // this.state = { theme };
    this.state = {
      timer: 0,
      scale: this.getScale(),
    };
  }
//2、监听resize变化,赋给不同的scale比例值
 componentDidMount() {
    //let begin_time = `${moment(new Date())
      .subtract(10, ‘days‘)
      .format(‘YYYY-MM-DD HH‘)}:00:00`;
    //let end_time = `${moment(new Date()).format(‘YYYY-MM-DD HH‘)}:00:00`;
    //this.loadTotalPlan();
    //this.loadAggsData(begin_time, end_time);
    //this.intervalLoad(begin_time, end_time);
    window.addEventListener(‘resize‘, this.handleResize);
  }
//debounce为防抖函数
handleResize = debounce(() => {
    let scale = this.getScale();
    // console.log(scale, ‘scale-----‘);
    this.setState({
      scale: scale,
    });
  }, 300);
//3、在render的使用，加在标签上
 <div
        className={styles.screenBox}
        style={{
          transform: `scale(${scale})`,
          transformOrigin: ‘left top‘,
          width: ‘1920px‘,
          height: ‘1080px‘,
          overflow: ‘hidden‘,
        }}
      >
</div>

pc端大屏自适应

原文：https://www.cnblogs.com/shewill/p/15044032.html