按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>