下面是基于antd案例的设计方案：

1、入口文件index.tsx

入口文件index.tsx


<App style={
  
  { width: '100vw', height: '100vh', overflow: 'hidden' }}>
            <Suspense fallback={<LoadingPage />}>
              <RouterGenerator />
            </Suspense>
</App>

设置系统窗口高度：{ width: '100vw', height: '100vh', overflow: 'hidden' }

2、基础页面basicLayout
 

 
const backgroundElementRef = useRef(document.body);

useEffect(() => {
    const { parentElement } = backgroundElementRef.current;
    if (!parentElement) {
      return null;
    }
    const observer = new ResizeObserver(() => {
      const widthScale = parentElement.offsetWidth / 1920;
      const height = parentElement.offsetHeight / 1080;
      backgroundElementRef.current.style.transform = `scale(${widthScale}, ${height})`;
    });
    observer.observe(parentElement);
    return () => {
      observer.disconnect();
    };
  }, []);

//优化代码
useEffect(() => {
  const { parentElement } = backgroundElementRef.current;
  if (!parentElement || !backgroundElementRef.current) {
    return;
  }

  const BASE_WIDTH = 1920;
  const BASE_HEIGHT = 1080;

  const resizeHandler = () => {
    const widthScale = parentElement.offsetWidth / BASE_WIDTH;
    const heightScale = parentElement.offsetHeight / BASE_HEIGHT;
    backgroundElementRef.current.style.transform = `scale(${widthScale}, ${heightScale})`;
  };

  const observer = new ResizeObserver(resizeHandler);
  observer.observe(parentElement);

  return () => {
    observer.disconnect();
  };
}, []);

return(
  <Layout ref={backgroundElementRef} className={styles.wrapper}>
    ...
  </Layout>
)

3、基础页面css样式

.wrapper {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow-x: hidden;
  transform-origin: left top;

}