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>