咨询：CSS硬编码像素宽度在不同分辨率屏幕显示值与设置值不符

云上老周

2026-8-3

问题：硬编码px宽度为何在不同屏幕实际显示尺寸不一致？

我的屏幕分辨率是1920x1080，给div硬编码设置200px宽度后，截图在Photoshop里测量实际显示为250px；用4K屏幕的朋友做同样操作，实际显示宽度是450px。我知道百分比单位会随屏幕变化，但像素单位理论上应该不受屏幕影响才对。这个例子用了table和table-cell布局，但我在flexbox布局里给菜单栏设硬编码px宽度时，也遇到了完全一样的问题。请问我忽略了哪些相关知识点？

代码示例

CSS 代码

*{
    margin:0;
    padding:0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.main{
    display: table;
}

.a{
    display: table-cell;
    width: 200px;
    background-color: tomato;
}

HTML 代码

<div class="main">
        <div class="a">
            width set to 200px
        </div>
</div>

解答

混淆了CSS像素与物理像素：你写的200px是CSS像素，并非屏幕的物理像素。现代高DPI屏幕存在设备像素比（DPR），比如1920x1080屏幕若设置125%缩放，DPR为1.25，此时1个CSS像素对应1.25个物理像素，200×1.25=250，与你测量结果吻合；4K屏幕若设置225%缩放（DPR=2.25），200×2.25=450，和你朋友的测量值一致。
浏览器缩放直接改变像素映射比例：浏览器的页面缩放会调整CSS像素与物理像素的对应关系，哪怕是同一屏幕，不同缩放比例下，相同CSS px对应的物理像素数量也会变化。只有当浏览器设置100%缩放时，CSS像素才会和物理像素1:1对应。
布局特性并非问题核心：虽然你在table-cell和flex布局都遇到该问题，但table-cell的width实际是最小宽度的特性并非此问题根源，核心还是CSS像素与物理像素的映射逻辑。