数据大屏React使用scale适配解决方案

实现代码

React

/*
     JS部分
 */
//数据大屏自适应函数
const handleScreenAuto = () => {
    const designDraftWidth = 1920; //设计稿的宽度
    const designDraftHeight = 960; //设计稿的高度
    //根据屏幕的变化适配的比例
    const scale =
        document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight
            ? document.documentElement.clientWidth / designDraftWidth
            : document.documentElement.clientHeight / designDraftHeight;
    //缩放比例
    (document.querySelector("#screen") as any).style.transform = `scale(${scale}) translate(-50%)`;
};

//React的生命周期 如果你是vue可以放到mountd或created中
useEffect(() => {
    //初始化自适应  ----在刚显示的时候就开始适配一次
    handleScreenAuto();
    //绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => handleScreenAuto();
    //退出大屏后自适应消失   ---这是react的组件销毁生命周期，如果你是vue则写在deleted中。最好在退出大屏的时候接触自适应
    return () => (window.onresize = null);
}, []);


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*
    HTML部分
 */

    

;

1
2
3
4
5
6
7

/*
   CSS部分  --除了设计稿的宽高是根据您自己的设计稿决定以外，其他复制粘贴就完事
 */
.screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px; //设计稿的宽度
        height: 960px; //设计稿的高度
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

原理

designDraftWidth / designDraftHeight；这两个属性，叫做:设计稿宽高。顾名思义:就是设计师给我们出的那个设计稿是按照什么宽高比例出的设计图。换言之，我们制作视图的时候，得有个固定的宽高值。

参考

数据大屏最简单自适应方案，无需适配rem单位

支持设置高度/宽度缩放

this.scale = () => {
    if (this.props.type === "width") {
        const width = window.innerWidth;
        this.setState({
            scale: this.props.width ? (width / this.props.width) : 3840,
        });
    }
    else {
        const height = window.innerHeight;
        this.setState({
            scale: this.props.height ? (height / this.props.height) : 2160,
        });
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

style: { transform: `translate(-50%, -50%) scale(${this.state.scale})` }
1