设计稿与页面尺寸不符的四大主因：box-sizing被覆盖致内容区变窄；rem换算基准（font-size）不统一；transform/zoom缩放干扰布局测量；DPR导致量尺工具读数虚高。
检查 box-sizing 是否被意外覆盖
设计稿通常按 content-box 逻辑标注尺寸（比如标「按钮宽 120px」，指内容区宽度），但项目全局可能设置了 box-sizing: border-box，导致 padding 和 border 被算进 width 里，实际内容区变窄。
常见于重置样式（如 * { box-sizing: border-box; }）或第三方 UI 库默认行为。
验证方式：在 DevTools 里选中元素，看右侧面板的「Computed」标签页下 box-sizing 值；再对比「Layout」面板中 width、padding、border 的叠加结果是否等于你写的 width 值。
确认设计稿基准与页面 font-size / rem 换算是否对齐
很多团队用 rem 布局适配多端，但容易忽略「设计稿 1px = 代码中多少 rem」这个换算关系是否统一。
例如：设计稿基于 375px 宽，约定 1rem = 37.5px（即根字号设为 font-size: 37.5px），那么设计稿上 75px 的元素应写成 width: 2rem。若实际根字号是 16px 或被其他 CSS 覆盖（如媒体查询没生效、JS 动态改了 document.documentElement.style.fontSize），尺寸立刻失准。
排查要点：
- 打开 DevTools → Elements →
标签，看 computedfont-size是多少 - 检查是否有未触发的媒体查询（比如写了
@media (min-width: 768px)但 viewport 宽度不够） - 搜索项目中是否有多处设置
html { font-size: ... }，后写的会覆盖前写的
留意 transform: scale() 或 zoom 对布局尺寸的干扰
某些适配方案（尤其老项目）会用 transform: scale(0.5) 配合 meta viewport 实现“伪高清”，但这会让元素渲染尺寸缩放，而盒模型计算仍按原始值进行——DevTools 显示的 layout 尺寸和视觉尺寸不一致，导致测量错乱。
典型现象：设计稿 100px 的卡片，在页面上量出来是 50px，但 DevTools 的「Metrics」面板显示 width 仍是 100px。
快速判断：
- 在 Elements 面板中搜索
transform或zoom，看父容器是否被缩放 - 临时在控制台执行
getComputedStyle(document.body).transform，返回非none即存在缩放 - 禁用相关样式后刷新观察是否回归正常比例
设备像素比（window.devicePixelRatio）不影响 CSS 像素计算，但影响截图/量尺工具读数
设计稿标注的是 CSS 像素（device-independent pixels），而 Sketch/Figma 插件、浏览器截图、甚至某些量尺工具（如 MeasureIt）在高 DPR 屏幕（如 MacBook Retina、iPhone）上可能直接读取物理像素，造成「量出来比代码写的多一倍」的假象。
例如：DPR=2 时，CSS 写 width: 100px，实际占 200 物理像素；若量尺工具没做 DPR 归一化，就会显示 200。
验证方法：
console.log(window.devicePixelRatio); // 查看当前 DPR console.log(getComputedStyle(document.documentElement).fontSize); // 确认 CSS 像素基准
真正要对比的，永远是 DevTools 中「Layout」面板的数值，不是截图软件或屏幕标尺的读数。
设计稿和页面尺寸对不上，问题往往不在「写错了」，而在「算错了前提」——盒模型规则、单位换算链、缩放层、测量基准，任一环偏移都会让像素差出几像素甚至几十像素。动手前先盯住 DevTools 的 Computed 和 Layout 面板，比对着改代码快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
