移动端的适配(二)

146 阅读3分钟

「这是我参与2022首次更文挑战的第15天,活动详情查看:2022首次更文挑战」。

移动端的适配已经作为我早会的分享内容啦,废话少说。
上干货~~~~~ 上回书说到分辨率,现在继续

一、分辨率

1.屏幕分辨率

屏幕分辨率指一个屏幕具体由多少个像素点组成。

下面这站图是iphone官网给出的参数

image.png 这里可以看出,iphone Xs Maxiphone SE的分辨率分别是2688 x 12421135 x 640。也就是手机在垂直和水平方向具有的像素点。

2. 图像分辨率

我们通常说的图片分辨率其实是指图片含有的像素数,比如一张图片的分辨率为1080 x 720。这表示图片分别在垂直和水平上所具有的像素点数为1080720

同样尺寸的图片,图像分辨率越高,图片越清晰,如下图(图源网络)

image.png

3.PPI

每英寸包括的像素数。PPI可以用于描述屏幕的清晰度以及一张图片的质量。使用PPI描述图片时,PPI越高,图片质量越高,使用PPI描述屏幕时,PPI越高,屏幕越清晰。 还是以上面的手机图片为例,iphone Xs Maxiphone SEPPI分别是458326,很明显,前者的屏幕在使用上更清晰一些。 由于开发商给出的手机尺寸大多是英寸,我们通常使用下面的方法自行计算(前提是官方没有给出PPI

这里的计算以iphone6为例 image.png iPhone 6PPI为计算结果为 iPhone 6PPI13342+75024.7=325.6\frac{\sqrt{1334^2+750^2}}{4.7}=325.6,那它每英寸约含有326个物理像素点。

4. DPI

每英寸包括的点数。

这里的点是一个抽象的单位,它可以是屏幕像素点、图片像素点也可以是打印机的墨点。

平时你可能会看到使用DPI来描述图片和屏幕,这时的DPI应该和PPI是等价的,DPI最常用的是用于描述打印机,表示打印机每英寸可以打印的点数。

一张图片在屏幕上显示时,它的像素点数是规则排列的,每个像素点都有特定的位置和颜色。

当使用打印机进行图片打印时,打印机可能不会规则的将这些点打印出来,而是使用一个个打印点来呈现这张图像,这些打印点之间会有一定的空隙,这就是DPI所描述的:打印点的密度。如下图:

image.png

在上面的图像中我们可以清晰的看到,打印机是如何使用墨点来打印一张图像。

所以,打印机的DPI越高,打印图像的精细程度就越高,同时这也会消耗更多的墨点和时间。(仅限于墨点打印机)

打工人的摸鱼时间是真的短暂,今天的博客也就先更新到这里。明天见~

image.png