像素密度会影响各种设备的元素定位吗?

时间:2013-08-31 13:33:07

标签: jquery html css

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

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

2 个答案:

答案 0 :(得分:2)

CSS px 单位不是像素

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

w3.org有a page that explains px and other CSS units

  

px 单位是CSS的神奇单位。它与当前字体无关,也与绝对单位无关。 px 单位被定义为较小但可见,并且可以显示具有锐边的水平1px宽线(无抗锯齿)。什么是锋利的,小的和可见的取决于设备和它的使用方式:你把它靠近你的眼睛,如手机,手臂长度,如电脑显示器,或介于两者之间,如书?因此, px 不会定义为常量长度,而是取决于设备类型及其典型用途。

     

为了了解 px 的外观,想象一下20世纪90年代的CRT计算机显示器:它可以显示的最小点数约为1/100英寸(0.25毫米)或者再多一点。 px 单元的名称来自这些屏幕像素。

     

现在有些设备原则上可以显示较小的尖点(尽管您可能需要放大镜才能看到它们)。但是,无论设备是什么,上个世纪在CSS中使用 px 的文档看起来都是一样的。特别是打印机可以显示比1px小得多的细节线条,但即使在打印机上,1px线条看起来与计算机显示器上看起来非常相似。设备会发生变化,但 px 始终具有相同的视觉效果。

另一种思考方式是CSS px is an Angular Measurement

  

“像素单位是相对于观看设备的分辨率,即,最常见的是计算机显示器。如果输出设备的像素密度与典型的计算机显示器的像素密度非常不同,则用户代理应该重新缩放像素值。建议参考像素是设备上一个像素的视角,像素密度为96dpi,距离读取器的臂长。因为标称臂长为28英寸,因此视角约为0.0213度。“

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

答案 1 :(得分:0)

像素密度会影响外观,但不会影响布局。像素密度总体上是一个非常非常小的方面,由视频驱动程序和操作系统而不是CSS直接处理。对于公司来说,宣传像素密度作为区分产品的一种方式已经开始普遍存在,但这并不意味着它是一种新事物。

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

虽然不是唯一的像素密度关注字体选择可能是可能受影响的样式方面之一。经过精心调整以在给定屏幕(以及浏览器和操作系统)上呈现良好的字体可能在其他屏幕上看起来不太好。除了像素密度之外,还有许多其他因素,例如子像素渲染。

底线与相当长一段时间相同。设计你的内容;在各种设备上彻底测试它(如果可能的话),你应该没问题。