Interactive CSS Lab

CSS 的 1px，究竟点亮了多少物理像素？

先区分 CSS 逻辑尺寸与屏幕物理采样，再判断你的设计需要普通 1px，还是一个物理像素的 hairline。

一眼看懂核心关系

CSS 中的 1px 是一个逻辑像素。设备通过 DPR 决定用多少物理像素绘制它，而不是让高密度屏幕上的元素自动变成几倍大。

DPR=3 时，1px × 1px 的二维面积约覆盖 3 × 3 = 9 个物理像素；但 border: 1px 只计算一个方向上的厚度，因此约为 3 个物理像素厚。

每边的物理像素 CSS 像素 × DPR 面积需要把横向和纵向都乘一次，所以是 DPR²。

每张卡片都放大一小块物理像素网格。蓝色格子的数量表示一个完整 CSS 像素在该 DPR 下覆盖的物理像素面积。点击卡片查看换算。

当前浏览器 DPR：—

没有一种方案适用于所有目标。先确认需要普通 CSS 1px，还是必须尽量接近一个物理像素。

把“边框要多细”当成设计目标，而不是把 DPR 当成必须统一消除的差异。

直接使用 1px。它简单、稳定，也是大多数按钮、输入框和卡片边框的正确选择。

优先考虑伪元素加 scale()；项目允许时，也可以使用小数边框并做真机验证。

使用 rem、百分比、容器查询或 clamp()。这是视口与排版问题，不是 DPR 问题。