在CSS中，厘米属于绝对长度单位，理论上1cm对应物理世界中的一厘米，但实际显示效果会受到设备屏幕参数、系统缩放设置等多种因素影响，很难做到在所有设备上完全一致。要实现尽可能接近一厘米的显示宽度，需要结合单位特性和设备特性做适配。
CSS厘米单位的基本用法
CSS提供了cm作为绝对长度单位，直接在样式中给元素设置宽度即可使用，基础用法如下：
/* 设置元素宽度为1厘米 */
.cm-width {
width: 1cm;
height: 1cm;
background-color: #4a90e2;
}
在理想的标准显示环境下，上述代码会让元素显示为1厘米宽，但实际场景中大部分设备不会完全符合标准设定。
影响显示精度的核心因素
实际显示效果和理论值存在差异，主要和以下几个因素相关：
- 屏幕像素密度（DPI/PPI）：不同设备的每英寸像素数不同，高DPI屏幕的像素密度更高，相同CSS像素对应的物理尺寸更小。
- 系统缩放设置：Windows、macOS等系统都支持显示缩放，比如125%、150%缩放会让CSS的1px对应更大的物理尺寸。
- 浏览器视口设置：移动端浏览器的视口缩放会影响CSS单位的实际映射关系，没有正确设置视口会导致单位换算偏差。
提升显示精度的实现方案
1. 设置正确的视口
移动端页面必须设置视口，避免浏览器默认缩放导致单位换算错误，需要在HTML的head中添加如下标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2. 结合设备像素比动态计算
可以通过JavaScript获取设备的像素比，再结合标准的1英寸等于2.54厘米、1英寸等于96CSS像素的标准换算关系，动态计算接近1厘米的宽度值：
// 标准换算：1英寸=96px=2.54厘米，所以1厘米≈96/2.54 ≈ 37.795px
// 结合设备像素比调整，适配高DPI设备
function getCmWidthPx() {
const standardPxPerCm = 96 / 2.54;
// 获取设备像素比，默认值为1
const dpr = window.devicePixelRatio || 1;
// 基础计算值，可根据实际测试微调
return standardPxPerCm / dpr;
}
// 给目标元素设置计算后的宽度
const targetEl = document.querySelector('.cm-width');
if (targetEl) {
const cmPx = getCmWidthPx();
targetEl.style.width = cmPx + 'px';
}
3. 打印场景下的精确适配
如果是用于打印的页面，CSS的cm单位会非常准确，因为打印设备会严格按照物理尺寸映射，此时直接使用cm单位即可：
/* 打印样式，仅在打印时生效 */
@media print {
.print-cm-width {
width: 1cm;
height: 1cm;
border: 1px solid #000;
}
}
方案的局限性说明
目前没有方法能保证在所有屏幕上100%精确显示一厘米的宽度，因为不同用户的系统缩放设置、浏览器设置、屏幕硬件参数都存在差异。上述方案只能在大多数标准设置下接近一厘米的显示效果，如果需要极高精度的物理尺寸展示，建议优先选择打印场景，或者提示用户手动校准。同时可以在页面中增加一个参考标尺，让用户根据实际测量情况微调样式值。
总结
用CSS实现接近一厘米的宽度显示，需要结合cm单位、视口设置、设备像素比计算三种方式配合。日常开发中如果只需要近似效果，直接使用1cm单位即可；如果需要更高的精度，可以通过JavaScript动态计算适配。同时要明确该需求的适用场景，避免在不合适的场景下强行追求完全精确的厘米显示。