#yyds干货盘点#数据化大屏自适应

一般UI给到的数据化大屏设计稿是电脑屏幕的全屏分辨率(即宽高16:7的占比)，所以为了适应浏览器可视化窗口的比例，用transform: scale()实现。
注意：固定了宽高比，所以窗口比例不足时，上下或左右会出现空白区(可外层套个容器，给与大屏主色调相近的背景色)。

JS写法：

// 设计稿宽高
const designDraftWidth = 1920; //设计稿的宽度
const designDraftHeight = 1080; //设计稿的高度
//数据大屏自适应函数
const screenAdapt = () => {
    // 获取可视化窗口宽高与屏幕大小宽高比
    const wScale = window.innerWidth / designDraftWidth;
    let hScale = window.innerHeight / designDraftHeight;
    // 判断宽高比例，选较大的
    let currentScale = wScale > hScale ? hScale : wScale;
    // 给需要自适应的大屏添加样式
    document.querySelector("#div").style = `width:${designDraftWidth}px;height:${designDraftHeight}px;transform:scale(${currentScale}) translate(-50%, -50%);position: absolute;left: 50%;top: 50%;-ms-transform-origin: 0 0;transform-origin: 0 0;overflow: hidden;background-size: 100% 100%;transition: 0.8s;`
}
// 初始化
screenAdapt();
// 监听屏幕变化
window.addEventListener('resize',screenAdapt);

React写法

import React from "react";

// 设计稿宽高
const designDraftWidth = 1920; //设计稿的宽度
const designDraftHeight = 1080; //设计稿的高度

const Screen = (props) => {
    const [scale, setScale] = useState(0);// 宽高比

    //数据大屏自适应函数
    const screenAdapt = () => {
        // 获取可视化窗口宽高与屏幕大小宽高比
        const wScale = window.innerWidth / designDraftWidth;
        let hScale = window.innerHeight / designDraftHeight;
        let currentScale = wScale > hScale ? hScale : wScale;
        setScale(currentScale);
    }
    // 初始化
    useEffect(() => {
        screenAdapt();
        window.onresize = () => screenAdapt();
        //退出大屏后自适应消失
        return () => (window.onresize = null);
    }, [])

  return (
        <div class="page">
            <div
                class="screenPage"
                style={{
                    transform: `scale(${scale}) translate(-50%, -50%)`,
                    width: designDraftWidth,
                    height: designDraftHeight
                }}
            >
            </div>
        </div>
    )
}
export default Screen;


/* CSS部分 */
.page {
    background:#000;
    .screenPage {
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: 0 0;
        overflow: hidden;
        background-size: 100% 100%;
        transition: 0.8s;    
    }
}