5

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

我的问题是，如果在具有高像素密度的设备上查看该网站，这种方法是否仍然有效？我没有什么可以测试并感谢任何反馈。在我看来，我认为如果设备具有高像素密度50px只会稍微移动它，但我希望我错了。

4

2 回答 2

2

CSSpx单位不是像素。

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

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

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

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

现在有些设备原则上可以显示较小的尖点（尽管您可能需要放大镜才能看到它们）。但是上个世纪在 CSS 中使用px的文档看起来还是一样的，不管是什么设备。尤其是打印机，可以显示比 1px 细得多的锐利线条，但即使在打印机上，1px 线条看起来也与在计算机显示器上看起来非常相似。设备发生变化，但px始终具有相同的视觉外观。

另一种思考方式是CSS px 是一个 Angular Measurement：

“像素单位与观看设备的分辨率有关，即最常见的是计算机显示器。如果输出设备的像素密度与典型的计算机显示器的像素密度有很大不同，用户代理应该重新调整像素值。建议参考像素为像素密度为96dpi、距离阅读器一臂远的设备上一个像素的视角。对于 28 英寸的标称臂长，因此视角约为 0.0213 度。”</p>

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

于 2013-09-09T16:08:37.610 回答
0

The pixel density can affect the appearance, but not the layout. Pixel density is overall a very, very minor aspect and is handled by video drivers and the operating system rather than your CSS directly. It's begun common for companies to advertise pixel densities as a way of differentiating their product, but this doesn't mean its a new thing.

All PCs, laptops, tables, phones, and TVs with the same resolution but different screen dimensions (even just different aspect ratios) have different pixel densities. While we do have to consider different resolutions, we do not have to consider pixel density.

While not exclusively a pixel-density concern font choice may one of the styling aspects that could be affected. A font that a finely tuned to render well on a given screen (as well as browser, and operating system) potentially won't look as good on others. There are many factors other than just pixel density at play here, such as sub-pixel rendering.

The bottom line is the same as it has been for quite a while. Design your content; test it thoroughly on diverse devices (if possible) and you should be fine.

于 2013-08-31T14:14:06.630 回答