shewill
  • 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>

分类:

技术点:

相关文章: