关于javascript:数据化大屏自适应

个别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;        }}