blog
blog copied to clipboard
Qingquan-Li
分辨率相关：屏幕尺寸、px、pt、em，物理像素和逻辑像素，以及 DPI、PPI …
在线获取你的设备屏幕尺寸：https://www.mydevice.io 比较各种设备的屏幕尺寸：https://www.mydevice.io/#compare-devices
一、屏幕尺寸
例如：iPhone 6 为 4.7 英寸，这个 4.7 英寸指的是屏幕对角线长度。 注意：英寸为长度单位，并不是面积单位。
1英寸（inch）=2.54厘米（cm）
| 机型 | 屏幕尺寸 | 分辨率大小 | PPI |
|---|---|---|---|
| iPhone6、6S、7、8 | 4.7英寸 | 750px * 1334px | 326ppi |
| 小米4 | 5英寸 | 1920px * 1080px | 441ppi |
| 华为荣耀7 | 5.2英寸 | 1920px * 1080px | 424ppi |
二、分辨率
红色字体含义：https://www.zhihu.com/question/25361043
2.1 像素分辨率：
px：像素 pixel（picture X element），简称 px ，是一个虚拟长度单位（没有固定的长度，），是计算机系统的数字化图像长度单位。
- px 要换算成物理长度，需要指定像素密度 DPI／PPI（Dots／Pixels Per Inch，每英寸像素数），Windows 系统默认是 96 dpi ，Apple 系统默认是（标准） 72 dpi 。
- 一般应用于显示荧屏领域。
- 华为荣耀 7 的 5.2 英寸屏幕上，分辨率为 1920px * 1080px（424 ppi） ：在 5.2 英寸屏幕上，在竖向的高度上有 1920 个像素块，在横向的宽度上有 1080 个像素块。
- iPhone 6/6S/7/8 Plus 的 5.5 英寸的屏幕上，分辨率为 1920px * 1080px（401 ppi）： 在 5.5 英寸屏幕上，在竖向的高度上有 1920 个像素块，在横向的宽度上有 1080 个像素块。
2.2 点分辨率（逻辑分辨率）：
pt：磅 point ，简称 pt，是一个物理长度单位，指的是 1/72 英寸。
- 一般应用于打印或印刷领域。
2.3 px - pt 换算：
1 pt = 1/72（英寸）， 1 px = 1 / dpi（英寸） 因此 pt = px * dpi / 72
- 以 Windows 系统下的 96dpi 来计算，1 pt = px * ( 96 / 72 ) = px * ( 4 / 3 )
- 以 Apple 系统下的（标准） 72 dpi 来计算，1 pt = px * ( 72 / 72) = 1 px
三、像素密度
描述分辨率的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（每英寸像素）。
- 像素密度：单位面积内的像素数量除以单位面积。
- 像素总数---图片、视频的单独一帧图所含像素的数量，计算方式为长边的像素个数乘短边的像素个数。
3.1 DPI
DPI （ Dots Per Inch ）：最初用于衡量打印物上每英寸的点数密度，就是表示你的打印机可以在一英寸内打印多少个点。DPI 值越大，打印的内容越清晰。
3.2 PPI
当 DPI 的概念迁移到计算机屏幕上的时候,就应该称之为 PPI （ Pixels Per Inch ）。同理：PPI就是表示计算机屏幕上每英寸可以显示的像素点的数量。
PPI：每英寸像素（ Pixels Per Inch ），是像素密度( pixel density )单位，即每英寸的长度中所具有的像素。
3.3 PPI 和 DPI 区别
PPI 和 DPI 经常都会出现混用现象。从技术角度说，“像素”只存在于电脑显示领域，而“点”只出现于打印或印刷领域。
四、em
em 是相对长度单位，相对于当前对象内文本的字体尺寸。最初是指字母 M 的宽度，故名 em 。现指的是字符宽度的倍数，用法类似百分比，如：0.8em，1.2em，2em 等。通常 1em = 16px 。
五、物理像素、逻辑像素、设备像素比
参考：
- https://juejin.im/post/5cd0f87d6fb9a0325031c7ae
- https://blog.csdn.net/zhouziyu2011/article/details/70176511
5.1 物理像素
物理分辨率也叫标准分辨率，设备像素，设备屏幕实际拥有的像素点，屏幕的基本单元，是有实体的。是指LED显示屏显示的图像原始分辨率，也叫真实分辨率。
在同一类设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。
比如 iPhone 6 的屏幕在宽度方向有 750 个像素点，高度方向有 1334 个像素点，所有 iPhone 6 总共有 750×1334 个像素点。苹果官网上显示的显示屏技术规格：1334 × 750 像素分辨率（物理像素）。
决定图像清晰程度的是物理分辨率。
5.2 逻辑像素
也叫“设备独立像素”（Device Independent Pixel，DIP），可以理解为反映在 CSS/JS 程序里面的像素点，也就是说 CSS 像素是逻辑像素的一种。
我们平时描述一张图片宽高时一般用 200px × 100px，这里的 px 也是逻辑像素。
5.3 设备像素比（Device Pixel Ratio，DPR）
一个设备的物理像素与逻辑像素之比。
当像素比为 1:1 时，使用 1 个物理像素显示 1 个逻辑像素；当像素比为 2:1 时，使用 4 个物理像素显示 1 个逻辑像素。
像素为什么会有“物理”和“逻辑”之分，它们之间什么区别？
其实在很久以前，的确是没区别的，CSS里写个1 px，屏幕就给你渲染成 1 个实际的像素点，DPR=1 ，多么简单自然~
后来苹果公司为其产品，例如部分 Mac、iPhone 以及 iPad 配置了 Retina 高清屏，苹果公司使用 4 个乃至更多物理像素来渲染 1 个逻辑像素。
在 Retian 屏上，DPR 不再是 1 ，而是大于 1 ，比如 2（iPhone 5、6、6s、7、8）或 3（iPhone 6 Plus等一系列Plus、iPhoneX等）或者为非整数（一些 Android 机）。
附1：APPLE_Retina
有研究表明，人类肉眼能够分辨的最高像素点密度是 300 每英寸像素。超过 300 每英寸像素的屏幕被常常称为 Retina 显示屏，这个概念最早由苹果公司于 2010 年推出 iPhone 4 手机的时候提出。
第三代 iPad 发布会上，苹果给出了 Retina 设计标准的公式：
其中 a 代表人眼视角， h 代表像素间距， d 代表肉眼与屏幕的距离。匹配以上条件的屏幕可以使肉眼看不见单个物理像素点。这样的 IPS 屏幕就可被苹果称作 “ Retina 显示屏”。将通常使用距离及正常眼能区分屏幕上两点的最小视角约为 1’ 代入上公式可知：
- 手机显示器的像素密度 >= 300ppi 就不会再出现颗粒感；
- 手持平板类电器显示器的像素密度 >= 260ppi 就不会再出现颗粒感；
- 而苹果行动电脑的 Retina 显示器像素密度只要 > 200ppi 就无法区分出单独的像素。
工作方式：
以 MacBook Pro with Retina Display 为例，工作时显卡渲染出 2880x1800 个像素，其中每 4 个像素一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的 1440x900 （MacBook Air）分辨率显示屏相同，但精细度是原来的 4 倍，但对于特殊元素，如视频与图像，则以一个图片像素对应一个屏幕像素的方式显示。
- 因此，Mac 不会产生 Windows 中分辨率提升使屏幕文字与图像变小，造成阅读困难的问题。
- 这样在设计软件时只需将所有的 UI 元素的精细度都提高到原来的4倍就可以既保持了观看舒适度，又提高了显示效果。
关于 iOS 设备，也由 4 个像素代替原来 1 个像素，通过下图对比就可以较明显地观察到这种关系。
附2：2 张手机参数图
附3：色彩深度
色彩深度计算机图形学领域表示在位图或者视频帧缓冲区中储存1像素的颜色所用的位数，它也称为位/像素（bpp）。色彩深度越高，可用的颜色就越多。 色彩深度是用“n位颜色”（n-bit colour）来说明的。若色彩深度是n位，即有2n种颜色选择，而储存每像素所用的位数就是n。 色彩深度：一个像素所能表达的不同颜色数取决于比特每像素（BPP,bit per pixel）。这个最大数可以通过取2的色彩深度次幂来得到。例如，常见的取值有：
- 8 bpp：256色，亦称为“8位”
- 16 bpp：216=65,536色，称为高彩色，亦称为“16位”
- 24 bpp：224=16,777,216色，称为真彩色，通常的记法为“1670万色”，亦称为“24位色”
- 32 bpp：224 +28，电脑领域较常见的32位色并不是表示232种颜色，而是在24位色基础上增加了8位（28=256级）的灰阶，因此32位的色彩总数和24位是相同的，32位也称为全彩
- 48 bpp：248=281,474,976,710,656色，用于很多专业的扫描仪
