首页 > 建站教程 > Div+Css >  「像素」「渲染像素」以及「物理像素」是什么东西?它们有什么联系?正文

「像素」「渲染像素」以及「物理像素」是什么东西?它们有什么联系?

        在进行这个问题的讨论前,先看下下面的图片:



    这张图中第一行的「像素」(Points) 就是所谓的「逻辑像素」。在 iPhone 4 前的时代,逻辑像素和物理像素是一一对应的——即,设计中的一个点对应屏幕硬件上的一个像素点。而 iPhone 4 之后,Retina 屏幕出现。在 Retina 屏幕上,使用 4 个硬件上的像素点 (2 x 2) 来表示一个逻辑像素点。举个例子——

    在开发环境中,使用 12 pt 的字体,在非 Retina 屏幕上字面高度为 12 个物理像素点;而同样是 12 pt 的字体,在 Retina (@2x) 屏幕上的字面高度,是 24 个像素点。
    同样,使用代码来生成的一个 20 pt x 30 pt 尺寸的举行,在非 Retina 屏幕中尺寸为 20 x 30 个物理像素;而在 Retina (@2x) 屏幕上,其尺寸为 40 x 60 个物理像素。

    在 Retina 屏幕上进行设计,文字尺寸、空间大小等等都应该遵照逻辑像素进行。比如,为 iPhone 4/4s (逻辑像素 320 pt x 480 pt,物理像素 620 px x 960)设计,则界面中各个元素的尺度应当以 320 x 480 为准;在 Retina 屏幕上的「2x」,可以理解为元素的精细度翻了一倍。换言之,多出来的那些像素并不是用来显示更多内容的,而是用来提高这些内容的精细程度的。这样,同样界面在 iPhone 4/4s 和旧设备上的差别,就仅在于画面的精细程度,而非内容的多寡。使用设计软件制作界面元素时尺寸的翻倍,也是为了提高精细度;在开发环境中,仍是按照 @1x 的逻辑来设计界面;如果误用 @2x 的尺度,则会导致文字、控件等过小。

    用 pt (points) 这个单位,也是强调了逻辑像素与物理像素不应等同理解。

    而渲染像素,在 iPhone 6 之前的设备不需在意——因为 Display Zoom 这个功能是从 iPhone 6 (Plus) 才开始加入,而 Downscale 的问题也只是在 iPhone 6 Plus 中会存在。

先讨论 iPhone 6:

    从上图可看到,iPhone 6 在未使用 Display Zoom 功能时,与之前的设备相同,使用四个物理像素表示一个逻辑像素,「渲染像素」也与物理的像素完全对应。其逻辑像素为 375 pt x 667 pt, 即可以显示的内容比 iPhone 5 系增加。
    而开启 Display Zoom 功能时,逻辑像素与 iPhone 5 系列相同,即 320 pt x 568 pt. 而「渲染像素」也是直接进行 @2x 处理。所谓「渲染像素」,即系统处理出来的原始画面的尺寸。但 iPhone 6 的物理像素为 750 px x 1334px, 比「渲染像素」要高。所以,会将画面「拉大」显示。这样的画面是会模糊的——想想在实际分辨率为 1024 x 768 的液晶屏幕上显示 800 x 600 的图像,即可知道。

而 iPhone 6 Plus, 情况更复杂一些:

    iPhone 6 Plus 的逻辑像素为 414 pt x 736 pt, 而其使用了新一代的 Retina 屏幕 (@3x),换言之,如果按照上述的显示方式,物理像素理应为 1242 px x 2208 px. 从图中 iPhone 6 Plus 的「渲染像素」亦可以看到这一个值。但是,不知是因为产能还是技术的限制,Apple 未能在此代 iPhone 6 Plus 中使用 1242 px x 2208 px 的屏幕,而仅使用了 1080p 屏幕。这就导致了,iPhone 6 显示的画面也是有一定的模糊的——想想将 1024 x 768 的画面压缩到 800 x 600 的显示器中进行现实,即可得知。不过,因为 iPhone 6 Plus 像素密度已然颇高,所以模糊并不显著。
    而使用 Display Zoom 的情况,与 iPhone 6 类似,不再赘述。
    虽然 1080p 屏幕也可以作为 @3x 的 Retina 屏幕 (360 pt x 640 pt @3x),但估计现有的逻辑分辨率是根据 iPhone 6 Plus 屏幕的物理尺寸(对角线长度 5.7 英寸)而选取的。所以,唯有在本代产品进行 downscale. 等技术 / 产能问题解决,估计就会使用物理像素为 1242px x 2208 px 的屏幕了。

    总而言之,图中的「像素」(即,所谓逻辑像素)是设计时应当参考的尺度;而「渲染像素」,则是系统基于「逻辑像素」进行对应倍增(1x、2x 或 3x)而得的结果;物理像素,则是设备屏幕实际具有的像素数目。