React项目SCSS样式元素尺寸异常，浏览器分辨率与屏幕实际不符求助

核心原因 #

你遇到的问题本质是系统缩放比例导致CSS像素与物理像素不匹配：

• Windows的125%缩放会让浏览器将物理像素按比例转换为CSS像素，1920×1080的物理分辨率除以1.25，正好得到检测工具显示的1536×864（这是浏览器实际使用的CSS像素尺寸，不是物理分辨率）。
• SCSS中写的width/height是CSS像素单位，当系统缩放时，浏览器会把这些CSS像素映射到更多的物理像素上，视觉上就会出现元素尺寸和预期不匹配的情况。
• 主用电脑无需调整，大概率是因为它的系统缩放为100%，或者你的项目在那台设备上用了相对单位而非固定px，自然适配了显示环境。

解决办法 #

1. 替换固定px为相对单位
   优先用rem、vw/vh、%这类相对单位代替固定像素值，比如：

   // 不推荐的固定尺寸写法
   .box { width: 200px; height: 100px; }
   // 推荐的相对单位写法
   .box { width: 12.5vw; height: 5vw; } // 基于视口宽度的比例适配
   // 或者用rem（需先设置根元素基准字号）
   html { font-size: 16px; }
   .box { width: 12.5rem; height: 6.25rem; }
   

   相对单位会自动跟随系统缩放调整，避免固定尺寸的偏移。

2. 针对高DPR屏幕做样式适配
   用媒体查询检测设备像素比（DPR），对高缩放比例的屏幕单独调整样式：

   @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
     .box {
       width: calc(200px / 1.25);
       height: calc(100px / 1.25);
     }
   }
   

3. 重置浏览器缩放
   确保浏览器自身缩放是100%（按下Ctrl+0重置），浏览器缩放会叠加系统缩放，双重缩放更容易导致尺寸偏差。

4. React中动态适配DPR
   在React组件中通过window.devicePixelRatio获取当前设备的像素比，动态计算元素样式：

   import { useState, useEffect } from 'react';
   
   function MyComponent() {
     const [dpr, setDpr] = useState(window.devicePixelRatio);
   
     useEffect(() => {
       function handleResize() {
         setDpr(window.devicePixelRatio);
       }
       window.addEventListener('resize', handleResize);
       return () => window.removeEventListener('resize', handleResize);
     }, []);
   
     return <div style={{ width: `${200 / dpr}px`, height: `${100 / dpr}px` }}></div>;
   }
   

内容的提问来源于stack exchange，提问作者Vlad Popescu