像素密度会影响不同设备上元素的定位吗？

Question

我正在制作一份自定义幻灯片，希望我的幻灯片控件始终位于窗口底部的某个位置。为了实现这一点，我使用jQuery，并将包含控件的div的顶部属性设置为window height - 50px。

我的问题是，如果在像素密度高的设备上查看网站，这种方法是否仍然有效？我没有测试设备，感谢任何反馈。在我看来，如果设备具有高像素密度，则50px只会移动它的位置，但我希望我是错误的。

- user1424761

---

是的，它会工作。它仍然是50像素。如果您指的是苹果的“Retina显示屏”，它将在内部转换为100像素。 - Cole Tobin

谢谢你让我感到安心。 - user1424761

好的，我已经将那个评论作为答案发布，并添加了一些细节。如果这有所帮助，请尽可能地投上赞成票。如果它回答了你的问题，请点击投票箭头下方的勾号。 - Cole Tobin

顺便提一句：当CSS可行时，为什么要使用JQuery... .slide-controls{position:fixed;bottom:50px;} - gvee

Answer 1

px 单位不是像素。

这适用于它们在 jQuery 中的使用。 px 单位与显示器上的物理像素不直接对应。

w3.org 有一个页面解释了 px 和其他 CSS 单位：

px 单位是 CSS 的魔法单位。它与当前字体无关，也与绝对单位无关。 px 单位被定义为小而可见，可以显示具有锐利边缘（无抗锯齿）的水平 1px 宽线条。什么是锐利、小而可见的取决于设备及其使用方式：您将其靠近眼睛使用，如移动电话；在距离您臂长的地方使用，如计算机显示器；还是介于两者之间，如书籍？因此，px 并未被定义为一个恒定的长度，而是依赖于设备类型及其典型用途。

为了了解 px 的外观，想象一下 1990 年代的 CRT 计算机显示器：它可以显示的最小点约为 1/100 英寸（0.25 毫米）或更大。 px 单位的名称来自这些屏幕像素。

现在有些设备原则上可以显示更小的锐利点（尽管您可能需要放大镜才能看到它们）。但是，使用 CSS 的 px 的上世纪文档看起来始终相同，无论使用什么设备。特别是打印机可以显示比 1px 更小的细节的清晰线条，但即使在打印机上，1px 的线条看起来也与在计算机显示器上看起来相同。设备会改变，但 px 的视觉外观始终相同。

另一种思考方式是将 px 视为角度测量。

“像素单位是相对于查看设备的分辨率的，即通常是计算机显示器。如果输出设备的像素密度与典型计算机显示器的像素密度非常不同，则用户代理应重新缩放像素值。建议将 参考像素 定义为具有 96dpi 像素密度和距读者一个手臂长度的设备上的一个像素的视觉角度。对于名义上的 28 英寸手臂长度，视觉角度因此约为 0.0213 度。”

因此，您的-50px在任何设备上的视觉大小应该大致相同。实际对应的像素数量取决于设备的像素密度、设备与用户眼睛的距离以及用户自定义。

- Michael Geary

---

什么？我测试过了。我在72ppi和96ppi屏幕上拍了一张50像素的截图。然后我在Paint.NET中测量它们的大小，它们的大小都显示为50像素。 - Cole Tobin

是的，这可以从W3的评论中看出：“px单位被定义为小而可见，并且水平1像素宽的线条可以显示出锐利的边缘（无抗锯齿）。” 这表明浏览器可能会执行视网膜式的像素加倍，但应避免分数缩放。一个例外是当用户设置了浏览器缩放因子时。然后，您当然会看到您的50px变成更多的物理像素。 - Michael Geary

Answer 2

像素密度可以影响外观，但不会影响布局。像素密度总体上是一个非常非常小的因素，由视频驱动程序和操作系统处理，而不是直接由CSS处理。公司开始将像素密度作为区分产品的一种方式进行宣传，但这并不意味着这是一件新事物。

所有具有相同分辨率但不同屏幕尺寸（甚至只是不同的宽高比）的个人电脑、笔记本电脑、平板电脑、手机和电视机都具有不同的像素密度。虽然我们确实需要考虑不同的分辨率，但我们不必考虑像素密度。

虽然字体选择不仅仅是像素密度的问题，但它可能是受影响的样式方面之一。在给定屏幕（以及浏览器和操作系统）上精心调整以良好呈现的字体，在其他屏幕上可能看起来不那么好。这里还有许多因素，而不仅仅是像素密度，例如子像素渲染。

底线与相当长一段时间以来一样。设计您的内容；在各种设备上彻底测试（如果可能），那么您应该没问题。

- STW