Jquery 像素密度是否影响元素在不同设备上的定位？

我正在制作一个自定义幻灯片，我希望我的幻灯片控件始终位于窗口底部的某个位置。为此，我使用jQuery并将包含控件的div的top属性设置为

窗口高度-50px

---

我的问题是，如果在高像素密度的设备上查看站点，这种方法是否仍然有效？我没有什么可测试的，非常感谢您的反馈。在我看来，如果一台设备的像素密度很高，那么它只会轻微移动，但我希望我错了。

像素密度会影响外观，但不会影响布局。像素密度是一个非常非常小的方面，由视频驱动程序和操作系统处理，而不是直接由CSS处理。作为产品差异化的一种方式，公司开始普遍宣传像素密度，但这并不意味着这是一件新鲜事

所有分辨率相同但屏幕尺寸不同（甚至只是宽高比不同）的PC、笔记本电脑、桌子、电话和电视的像素密度都不同。虽然我们必须考虑不同的分辨率，但我们不必考虑像素密度。

字体的选择可能是可能受到影响的造型方面之一，而不仅仅是像素密度问题。一种字体，如果经过精心调整，能够在给定的屏幕（以及浏览器和操作系统）上很好地呈现出来，那么在其他屏幕上可能就不那么好看了。除了像素密度之外，还有很多因素在起作用，例如亚像素渲染

---

底线与很久以前一样。设计你的内容；在不同的设备上彻底测试它（如果可能的话），你应该会没事。

CSS

px

单位不是像素

这包括它们在jQuery中的使用

px

单位与显示器上的物理像素不直接对应

w3.org有：

px单元是CSS的神奇单元。它与当前字体无关，也与绝对单位无关。px单元被定义为小但可见，这样可以显示一条1px宽的水平线，并带有锐边（无抗锯齿）。什么是锐利的，小的和可见的取决于设备和它的使用方式：你是把它靠近你的眼睛，像一部手机，在手臂的距离，像一个电脑显示器，或介于两者之间，像一本书？因此，px不被定义为恒定长度，而是取决于设备类型及其典型用途

要了解px的外观，想象一下20世纪90年代的CRT计算机显示器：它能显示的最小点大约是1/100英寸（0.25毫米）或更大一点。px单元的名称来自这些屏幕像素

现在有一些设备原则上可以显示更小的尖点（尽管你可能需要放大镜才能看到它们）。但是上个世纪的文档在CSS中使用了px，无论使用什么设备，它们看起来都是一样的。特别是打印机，可以显示比1px小得多的细节的锐利线条，但即使在打印机上，1px线条看起来也和计算机显示器上的一样。设备会发生变化，但px始终具有相同的视觉外观

另一种思考方式是：

“像素单位与观看设备（通常是计算机显示器）的分辨率有关。如果输出设备的像素密度与典型计算机显示器的像素密度非常不同，则用户代理应重新缩放像素值。建议参考像素为具有pix的设备上一个像素的视角el密度为96dpi，与读卡器的距离为一个臂长。对于标称臂长为28英寸的情况，视角约为0.0213度。”

---

因此，在任何设备上，您的

-50px

在视觉上都应该显示为大致相同的大小。对应的实际像素数将取决于设备的像素密度、设备与用户眼睛的距离以及用户自定义。

是的，它可以工作。它仍然是50像素。如果您指的是“视网膜显示”从苹果公司，它将被转换为100像素。谢谢你让我安心。好吧，我已经发布了这个评论，作为一个带有一些附加细节的答案。如果这有帮助，如果可以，投上一票。如果它回答了你的问题，请单击投票箭头下面的复选标记。作为旁白：为什么要使用JQuery，而CSS可以…

。幻灯片-控件{position:fixed；bottom:50px；}

Huh？我测试了这个。我在72 ppi和96 ppi屏幕上取了一个50 px的打印屏幕。然后我在Paint.NET中测量了大小，它们都测量为50 px。是的，W3的评论暗示了这一点“px单元被定义为小但可见，这样一条1px宽的水平线可以显示为锐边（无抗锯齿）。“这表明浏览器可能会进行视网膜样式的像素倍增，但应避免分数缩放。一个例外是当用户设置了浏览器缩放因子时。当然，您会看到您的50像素变为更多的物理像素。