高分辨率显示器上的小数 CSS 像素大小

Question

（我已经看过了；我不相信这是重复的：Are the decimal places in a CSS width respected?）

我设置对象的大小如下：

.foo {
  height: 10.5px;
  width: 10.5px;
}

通常会向下取整；你不能使用半个像素。

也就是说，最新的 Nexus 7 具有 320dpi，Android 设备上的 CSS 像素定义为 160dpi。在 Nexus 7 上使用 400 像素而不是 100 像素绘制 10 像素 x 10 像素的图像。

那么在高像素密度设备上——那些 window.devicePixelRatio > 1.0——是小数像素有用，还是被丢弃了？

（谢谢！）

编辑，举一个真实的例子。

我有一台 MacBook Retina。我有一个 21x21 像素的图像文件。我希望它显示在我的视网膜上而不以任何方式重新缩放；我希望文件中的每个像素对应于屏幕上的一个像素。 CSS 像素不与硬件像素相关联，CSS 中的 1 像素对应于 Retina 显示器或 Nexus 7/10 上的 4 像素（2 宽，2 高）。

我希望能够指定图像的确切大小，这样它就不会重新缩放，并且一旦加载图像，页面就不会重排。我可以通过将图像放入设置为 11x11 的 div 中，并将图像显示为 100% 来做到这一点，但这会增加一个额外的 div，而且我对页面大小是一个触摸强迫症。

Answer 1

它们被丢弃了。

我想我明白了你想要用分数像素实现的目标，但实际上你需要走的路线是使用更高分辨率的图像来实现更高密度的显示器。那应该做你想做的，不是吗？

我想不出有什么理由需要小数像素或任何类似的东西。

话虽如此，小数像素不起作用，但小数百分比可以。

.foo {
    height: 10.5%;
    width: 10.5%;
}

这将起作用并且应该做任何你需要分数像素的事情（你需要从例子中明显地改变百分比）。