做前端开发久了，难免遇到一些看似奇怪的需求，比如产品经理拿着游标卡尺说：这个色条在屏幕上要正好1厘米宽。很多人第一反应是写个width: 1cm不就完了？但真拿尺子去量屏幕，八成会对不上。这篇文章就来把屏幕上绘制真实物理尺寸这件事彻底讲清楚，包括CSS绝对单位的定义、为什么会有偏差，以及在需要真实厘米时有哪些靠谱的替代方案。
一、CSS的cm单位到底是不是真的厘米
按照CSS规范的定义，cm属于绝对单位，换算关系是1cm = 96px / 2.54，也就是约等于37.8px。注意这里的px指的是CSS像素，不是屏幕上的物理发光点。CSS规范还规定了一个基准：1px对应的视角约为0.0213度，也就是假设用户距离屏幕一个手臂长度时的视觉大小。换句话说，cm单位追求的是视觉上的稳定，而不是物理上的精确。
这带来一个直接后果：同一句width: 1cm，在普通1080p显示器、2倍缩放的Retina屏、手机屏幕上，用尺子量出来的实际宽度都不一样。浏览器根本不知道你的屏幕是多少英寸、物理分辨率是多少，它只是按系统给的缩放系数把CSS像素换算成设备像素去渲染。系统的缩放设置如果是125%，那37.8个CSS像素实际占据的物理宽度就变了。
可以做个简单实验验证。写一个宽度为1cm的div，背景设成黑色，然后在浏览器里按Ctrl加号放大页面，你会发现它跟着页面一起变大变小，这本身就说明它锚定的是视口逻辑尺寸，不是物理刻度。
<div style="width:1cm;height:1cm;background:#000;"></div> <div style="width:37.795275591px;height:37.795275591px;background:#333;"></div> <!-- 上面两个方块在浏览器中渲染宽度完全一致 -->
二、为什么屏幕上量不准：设备像素与缩放链路
要理解偏差来源，得先理清三层像素的概念。第一层是设备物理像素，是屏幕上真实的发光单元数量；第二层是CSS像素，是浏览器逻辑坐标系里的单位；第三层是系统缩放系数，也就是常见的devicePixelRatio。三者关系是：物理像素数等于CSS像素数乘以devicePixelRatio。当devicePixelRatio是1.5这种非整数时，还会引入亚像素舍入误差，边界处抗锯齿处理会让1厘米的边缘看起来发虚。
另一个干扰因素是浏览器自身的页面缩放。用户按Ctrl加号放大到110%，所有CSS尺寸等比放大，此时你的1cm实际可能显示成1.1厘米。通过window.devicePixelRatio可以读到当前缩放后的比值，配合matchMedia监听resolution的变化，可以在用户缩放时动态修正尺寸：
// 读取当前设备像素比
let dpr = window.devicePixelRatio;
// 监听缩放变化
const mq = matchMedia(`(resolution: ${dpr}dppx)`);
mq.addEventListener('change', () => {
dpr = window.devicePixelRatio;
console.log('缩放系数变了，修正尺寸', dpr);
});
// 根据dpr修正元素宽度，抵消缩放影响
function fixToRealCm(el) {
// 基准：标准dpr下 1cm ≈ 37.7953px
const baseDpr = parseFloat(sessionStorage.getItem('baseDpr') || dpr);
sessionStorage.setItem('baseDpr', baseDpr);
el.style.width = (37.7953 * baseDpr / dpr) + 'px';
}
还有一种更隐蔽的情况：操作系统层面设置了自定义缩放比例，比如Windows显示设置里的125%、150%。这时浏览器拿到的devicePixelRatio本身就反映了系统缩放，你的修正逻辑要区分清楚用户是改了系统缩放还是改了浏览器缩放，处理方式并不相同。实践中通常只针对浏览器缩放做补偿，系统缩放则默认用户接受其显示效果。
三、需要真实物理厘米时的几种实现思路
如果需求只是打印场景，事情反而简单。打印CSS中1cm是可靠的，因为打印机知道纸张的物理尺寸，浏览器生成打印稿时会把绝对单位映射到真实的厘米。只需要加一段打印媒体查询，屏幕上用px，打印时切换成cm即可：
@media print {
.ruler-line {
width: 10cm; /* 打印时输出真实10厘米 */
height: 0.5mm;
background: #000;
}
}
如果必须在屏幕上精确，标准CSS做不到绝对物理准确，因为浏览器拿不到屏幕的物理尺寸信息。业界通用的做法是标定：在页面上显示一条已知CSS宽度的参照线，让用户拿信用卡、身份证或尺子去比对，输入实际测量的物理长度，程序据此算出这台设备上1厘米对应多少CSS像素，再用这个系数渲染所有元素。网上很多在线尺子工具就是这么实现的。逻辑大致如下：
// 用户标定：参照线CSS宽度600px，用户量得实际6.3厘米
let cssPxPerCm = 600 / 6.3; // 约95.24
// 绘制真正的1厘米元素
function drawRealCm(el) {
el.style.width = cssPxPerCm + 'px';
}
如果是在Electron这类桌面壳里，还可以绕过浏览器直接调用操作系统的DPI查询接口拿到更准确的每英寸点数，再结合窗口在屏幕上的位置换算物理尺寸，这是网页环境里做不到的能力。另外有些特殊行业需求会借助摄像头拍摄屏幕上的参照物做视觉标定，成本高但精度也高，一般只在测量类工具产品里出现。
总结一下：日常布局中1cm够用且语义清晰；打印输出时可以放心信任绝对单位；只有在屏幕上要求真实物理刻度的场景，才需要引入用户标定或原生能力。理解了CSS像素这条抽象层的设计初衷——保证跨设备的视觉一致性而非物理一致性——很多关于绝对单位的疑惑就都解开了。