如何实现React应用随浏览器窗口大小平滑自适应缩放？

核心思路：基于容器的比例缩放 #

EN-ROADS的自适应逻辑是保持应用整体布局比例不变，随窗口大小自动缩放，而非传统流式布局。这种场景下，媒体查询会因断点过多导致代码冗余且流畅度差，采用「容器整体缩放」方案更简洁高效。

方案1：CSS + 少量JS结合（推荐） #

这种方案能严格还原设计稿比例，同时保证缩放流畅：

1. 定义基准容器与缩放逻辑
   假设设计稿基准尺寸为1920x1080（可根据实际调整），通过监听窗口尺寸变化，计算缩放比例并应用到根容器：

   import { useEffect, useRef } from 'react';
   
   function App() {
     const appContainerRef = useRef(null);
     // 设计稿基准宽高
     const baseWidth = 1920;
     const baseHeight = 1080;
   
     useEffect(() => {
       const handleResize = () => {
         const container = appContainerRef.current;
         if (!container) return;
   
         // 计算窗口与设计稿的宽高比例
         const widthRatio = window.innerWidth / baseWidth;
         const heightRatio = window.innerHeight / baseHeight;
         // 取最小比例，保证容器完整显示在窗口内
         const scale = Math.min(widthRatio, heightRatio);
   
         // 应用缩放并居中容器
         container.style.transform = `scale(${scale})`;
         container.style.transformOrigin = 'top left';
         container.style.left = `${(window.innerWidth - baseWidth * scale) / 2}px`;
         container.style.top = `${(window.innerHeight - baseHeight * scale) / 2}px`;
       };
   
       // 初始化执行一次
       handleResize();
       // 监听窗口尺寸变化
       window.addEventListener('resize', handleResize);
       // 组件卸载时清理监听
       return () => window.removeEventListener('resize', handleResize);
     }, []);
   
     return (
       <div className="app-wrapper">
         <div ref={appContainerRef} className="app-container">
           {/* 所有应用内容嵌套在此容器内 */}
         </div>
       </div>
     );
   }
   
   export default App;
   

2. 配套CSS样式

   .app-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     /* 可根据设计设置背景色 */
     background-color: #f5f5f5;
   }
   
   .app-container {
     position: absolute;
     width: 1920px;
     height: 1080px;
     /* 缩放时添加平滑过渡 */
     transition: transform 0.2s ease;
   }
   

方案2：纯CSS视口单位（适合简单布局） #

如果不需要严格固定布局比例，仅需自适应窗口大小，可直接用vw/vh单位替代固定像素：

/* 示例：字体大小随视口宽度变化 */
body {
  font-size: 1vw;
}

/* 容器保持16:9比例 */
.content-container {
  width: 80vw;
  height: 45vw;
}

该方案无需JS，但无法像方案1那样严格维持整体布局比例，适合布局灵活的场景。

优化注意事项 #

• 缩放后若出现文本模糊，可添加image-rendering: crisp-edges样式优化；
• 若应用包含Canvas或复杂交互元素，需通过缩放比例反向计算鼠标坐标，保证交互正常；
• 可给缩放比例设置最小值（如Math.max(scale, 0.7)），避免内容过小影响可读性。

内容的提问来源于stack exchange，提问作者Adam Shoaib