react大屏自适应使用scale终极解决方案

react  LargeScreen 组件实现代码

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import s from './index.less'

interface IndexProps {
    width: number,
    height: number
}
const LargeScreen: React.FC<IndexProps> = (props) => {
    const { width, height } = props;设计稿的宽度和高度
    const [scaleX, setScaleX] = useState<number>();
    const [scaleY, setScaleY] = useState<number>();

    //自适应函数
    const getScale = (width, height) => {
        const w = window.innerWidth / width;
        const h = window.innerHeight / height;
        return { x: w, y: h };
    }
    const setScale = (width, height) => {
        let { x, y } = getScale(width, height);
        setScaleX(x);
        setScaleY(y)
    }
    useEffect(() => {
        setScale(width, height);
        //监听浏览器缩放
        window.addEventListener("resize", () => {
            setScale(width, height);
        });
        return () => (window.onresize = null); //注销监听
    }, []);
    return (
        <div
            className={s['scale-box']}
            style={{
                transform: `scale(${scaleX},${scaleY}) translate(-50%, -50%)`,
                WebkitTransform: `scale(${scaleX},${scaleY}) translate(-50%, -50%)`,
                width: width,
                height: height,
            }}
        >
            {props.children}
        </div>
    );
};
export default LargeScreen;

2.绑定到html元素上，设置缩放

 <div
            className={s['scale-box']}
            style={{
                transform: `scale(${scaleX},${scaleY}) translate(-50%, -50%)`,
                WebkitTransform: `scale(${scaleX},${scaleY}) translate(-50%, -50%)`,
                width: width,
                height: height,
            }}
        >
            {props.children}
        </div>

3.组件调用

//width:设计稿宽度
//height:设计搞高度       
 <LargeScreen width={1920} height={1080} >
  业务代码
 </LargeScreen>