为什么在CSS中可以使用1.5px作为尺寸单位？

问题1：px是否并非显示器可表达的最小显示单位？ #

你混淆了两个完全不同的概念：CSS逻辑像素和显示器物理像素：

• 显示器的最小可显示单位确实是物理像素，也就是单个发光点，无法拆分显示
• 你在CSS中写的px是逻辑单位，和物理像素不是1:1对应，两者的比值叫做设备像素比（DPR），目前主流的手机、高分屏笔记本的DPR普遍为2或3，也就是1个CSS px实际对应2×2或3×3个物理像素

比如DPR=2的设备上，1.5px的CSS长度实际对应3个物理像素的宽度，自然会呈现出介于1CSS px和2CSS px之间的显示效果。

问题2：使用小于1px的单位是否合规可行？ #

合规性 #

完全符合W3C的CSS规范：CSS的长度值本身就允许非整数取值，小于1px的写法没有任何语法问题，属于合法的CSS代码。

可行性 #

是否能正常渲染完全取决于设备的DPR：

• 当设备DPR≥2时，小于1px的CSS值可以映射到整数个物理像素实现精确渲染，比如DPR=2的设备上0.5px的CSS值刚好对应1个物理像素，这也是前端实现"1px细边框"效果的常用方案，写法为border: 0.5px solid #eee
• 当设备DPR=1（老旧的普通低清屏）时，小于1px的CSS值会被浏览器根据策略四舍五入，要么渲染为1px，要么直接不显示，但不会引发代码报错

内容的提问来源于stack exchange，提问作者minjae kim