分辨率 · 前端笔记

[TOC] # 英寸一般用英寸描述屏幕的物理大小，如电脑显示器的`17`、`22`，手机显示器的`4.8`、`5.7`等使用的单位都是英寸。 需要注意，上面的尺寸都是屏幕对角线的长度： ![](https://box.kancloud.cn/d8b1c4e3b44aaef589cbb9476f6d9f9f_1280x903.png) 英寸(`inch`,缩写为`in`)在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。英寸和厘米的换算：`1英寸 = 2.54 厘米` # 分辨率 ## 像素像素即一个小方块，它具有特定的位置和颜色。 图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。 像素可以作为图片或电子屏幕的最小组成单位。 通常我们所说的分辨率有两种，屏幕分辨率和图像分辨率。 ## 屏幕分辨率屏幕分辨率指**一个屏幕具体由多少个像素点**组成。 下面是`apple`的官网上对手机分辨率的描述： ![](https://box.kancloud.cn/e6ec3c19bc7b1abc09d10a33986c4332_828x782.png) `iPhone XS Max`和`iPhone SE`的分辨率分别为`2688 x 1242`和`1136 x 640`。这表示手机分别在垂直和水平上所具有的像素点数。 当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。 ## 图像分辨率我们通常说的 **图片分辨率** 其实是指图片含有的`像素数`，比如一张图片的分辨率为`800 x 400`。这表示图片分别在垂直和水平上所具有的像素点数为`800`和`400`。 同一尺寸的图片，分辨率越高，图片越清晰。 ![](https://box.kancloud.cn/bb0283d7d91c744d8cc56326dfd2dc59_788x133.png) ## PPI `PPI(Pixel Per Inch)`：每英寸包括的像素数。 `PPI`可以用于描述屏幕的清晰度以及一张图片的质量。 使用`PPI`描述图片时，`PPI`越高，图片质量越高，使用`PPI`描述屏幕时，`PPI`越高，屏幕越清晰。 在上面描述手机分辨率的图片中，我们可以看到：`iPhone XS Max` 和 `iPhone SE`的`PPI`分别为`458`和`326`，这足以证明前者的屏幕更清晰。 由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算`PPI`: ![](https://box.kancloud.cn/b46a79e3e5b553dd6748339a6782889a_307x83.png) `iPhone 6`的`PPI`为：![](https://box.kancloud.cn/5d94bd367c571398c39b6c784e31c7c8_222x57.png) ，那它每英寸约含有`326`个物理像素点。 ## DPI `DPI(Dot Per Inch)`：即每英寸包括的点数。 这里的点是一个抽象的单位，它可以是屏幕像素点、图片像素点也可以是打印机的墨点。 平时你可能会看到使用`DPI`来描述图片和屏幕，这时的`DPI`应该和`PPI`是等价的，`DPI`最常用的是用于描述打印机，表示打印机每英寸可以打印的点数。 一张图片在屏幕上显示时，它的像素点数是规则排列的，每个像素点都有特定的位置和颜色。 当使用打印机进行打印时，打印机可能不会规则的将这些点打印出来，而是使用一个个打印点来呈现这张图像，这些打印点之间会有一定的空隙，这就是`DPI`所描述的：打印点的密度。 ![](https://box.kancloud.cn/d6e006606b6347be499cd8621fa5f90a_624x296.png) 在上面的图像中我们可以清晰的看到，打印机是如何使用墨点来打印一张图像。 所以，打印机的`DPI`越高，打印图像的精细程度就越高，同时这也会消耗更多的墨点和时间。 # 设备独立像素实际上，上面我们描述的像素都是 **物理像素**，即设备上真实的物理单元。 下面我们来看看 **设备独立像素** 究竟是如何产生的： 智能手机发展非常之快，在几年之前，我们还用着分辨率非常低的手机，比如下面左侧的白色手机，它的分辨率是`320x480`，我们可以在上面浏览正常的文字、图片等等。 但是，随着科技的发展，低分辨率的手机已经不能满足我们的需求了。很快，更高分辨率的屏幕诞生了，比如下面的黑色手机，它的分辨率是`640x940`，正好是白色手机的两倍。 ![](https://box.kancloud.cn/7987a7735ae1af98335a0f493e7654df_1110x960.png) 理论上来讲，在白色手机上相同大小的图片和文字，在黑色手机上会被缩放一倍，因为它的分辨率提高了一倍。这样，岂不是后面出现更高分辨率的手机，页面元素会变得越来越小吗？ 然而，事实并不是这样的，我们现在使用的智能手机，不管分辨率多高，他们所展示的界面比例都是基本类似的。乔布斯在`iPhone4`的发布会上首次提出了`Retina Display`(视网膜屏幕)的概念，它正是解决了上面的问题，这也使它成为一款跨时代的手机。 在`iPhone4`使用的视网膜屏幕中，把`2x2`个像素当`1`个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。 ![](https://box.kancloud.cn/07092530b6d4c6d2e6c85615e94bfd70_926x333.png) 如果黑色手机使用了视网膜屏幕的技术，那么显示结果应该是下面的情况，比如列表的宽度为`300`个像素，那么在一条水平线上，白色手机会用`300`个物理像素去渲染它，而黑色手机实际上会用`600`个物理像素去渲染它。 我们必须用一种单位来同时告诉不同分辨率的手机，它们在界面上显示元素的大小是多少，这个单位就是设备独立像素(`Device Independent Pixels`)简称`DIP`或`DP`。上面我们说，列表的宽度为`300`个像素，实际上我们可以说：列表的宽度为`300`个设备独立像素。 ![](https://box.kancloud.cn/7987a7735ae1af98335a0f493e7654df_1110x960.png) 打开`chrome`的开发者工具，我们可以模拟各个手机型号的显示情况，每种型号上面会显示一个尺寸，比如`iPhone X`显示的尺寸是`375x812`，实际`iPhone X`的分辨率会比这高很多，这里显示的就是设备独立像素。 ![](https://box.kancloud.cn/feabe3d19cb813b3c2183599901f0f8f_1280x694.png) ## 设备像素比设备像素比`device pixel ratio`简称`dpr`，即物理像素和设备独立像素的比值。 在`web`中，浏览器为我们提供了`window.devicePixelRatio`来帮助我们获取`dpr`。 在`css`中，可以使用媒体查询`min-device-pixel-ratio`，区分`dpr`： ~~~ @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ } ~~~ 在`React Native`中，我们也可以使用`PixelRatio.get()`来获取`DPR`。 当然，上面的规则也有例外，`iPhone 6、7、8 Plus`的实际物理像素是`1080 x 1920`，在开发者工具中我们可以看到：它的设备独立像素是`414 x 736`，设备像素比为`3`，设备独立像素和设备像素比的乘积并不等于`1080 x 1920`，而是等于`1242 x 2208`。 实际上，手机会自动把`1242 x 2208`个像素点塞进`1080 * 1920`个物理像素点来渲染，我们不用关心这个过程，而`1242 x 2208`被称为屏幕的`设计像素`。我们开发过程中也是以这个`设计像素`为准。 实际上，从苹果提出视网膜屏幕开始，才出现设备像素比这个概念，因为在这之前，移动设备都是直接使用物理像素来进行展示。 紧接着，`Android`同样使用了其他的技术方案来实现`DPR`大于`1`的屏幕，不过原理是类似的。由于`Android`屏幕尺寸非常多、分辨率高低跨度非常大，不像苹果只有它自己的几款固定设备、尺寸。所以，为了保证各种设备的显示效果，`Android`按照设备的像素密度将设备分成了几个区间： ![](https://box.kancloud.cn/7e80d2b251510a8fb50dec2cfddcaf0f_1000x576.png) 当然，所有的`Android`设备不一定严格按照上面的分辨率，每个类型可能对应几种不同分辨率，所以，每个`Android`手机都能根据给定的区间范围，确定自己的`DPR`，从而拥有类似的显示。当然，仅仅是类似，由于各个设备的尺寸、分辨率上的差异，设备独立像素也不会完全相等，所以各种`Android`设备仍然不能做到在展示上完全相等。 ## 移动端开发在`iOS`、`Android`和`React Native`开发中样式单位其实都使用的是设备独立像素。 `iOS`的尺寸单位为`pt`，`Android`的尺寸单位为`dp`，`React Native`中没有指定明确的单位，它们其实都是设备独立像素`dp`。 在使用`React Native`开发`App`时，`UI`给我们的原型图一般是基于`iphone6`的像素给定的。 为了适配所有机型，我们在写样式时需要把物理像素转换为设备独立像素：例如：如果给定一个元素的高度为`200px`(这里的`px`指物理像素，非`CSS`像素)，`iphone6`的设备像素比为`2`，我们给定的`height`应为`200px/2=100dp`。 当然，最好的是，你可以和设计沟通好，所有的`UI`图都按照设备独立像素来出。 我们还可以在代码(`React Native`)中进行`px`和`dp`的转换： ~~~ import {PixelRatio } from 'react-native'; const dpr = PixelRatio.get(); /** * px转换为dp */ export function pxConvertTodp(px) { return px / dpr; } /** * dp转换为px */ export function dpConvertTopx(dp) { return PixelRatio.getPixelSizeForLayoutSize(dp); } ~~~ ## WEB端开发在写`CSS`时，我们用到最多的单位是`px`，即`CSS像素`，当页面缩放比例为`100%`时，一个`CSS像素`等于一个设备独立像素。 但是`CSS像素`是很容易被改变的，当用户对浏览器进行了放大，`CSS像素`会被放大，这时一个`CSS像素`会跨越更多的物理像素。 `页面的缩放系数 = CSS像素 / 设备独立像素`。 ## 关于屏幕 `Retina`屏幕只是苹果提出的一个营销术语： > 在普通的使用距离下，人的肉眼无法分辨单个的像素点。 为什么强调`普通的使用距离下`呢？我们来看一下它的计算公式： ![](https://box.kancloud.cn/f3b837f9a4363f9eab893495deec90a0_170x26.png) `a`代表人眼视角，`h`代表像素间距，`d`代表肉眼与屏幕的距离，符合以上条件的屏幕可以使肉眼看不见单个物理像素点。 它不能单纯的表达分辨率和`PPI`，只能一种表达视觉效果。 让多个物理像素渲染一个独立像素只是`Retina`屏幕为了达到效果而使用的一种技术。而不是所有`DPR > 1`的屏幕就是`Retina`屏幕。 比如：给你一块超大尺寸的屏幕，即使它的`PPI`很高，`DPR`也很高，在近距离你也能看清它的像素点，这就不算`Retina`屏幕。 ![](https://box.kancloud.cn/d5df407d6341b387d6f75f83da143b6e_900x420.png) 我们经常见到用`K`和`P`这个单位来形容屏幕： `P`代表的就是屏幕纵向的像素个数，`1080P`即纵向有`1080`个像素，分辨率为`1920X1080`的屏幕就属于`1080P`屏幕。 我们平时所说的高清屏其实就是屏幕的物理分辨率达到或超过`1920X1080`的屏幕。 `K`代表屏幕横向有几个`1024`个像素，一般来讲横向像素超过`2048`就属于`2K`屏，横向像素超过`4096`就属于`4K`屏。 # 参考资料 [关于移动端适配，你必须要知道的](https://juejin.im/post/5cddf289f265da038f77696c)