移动端适配原理(上)

2020-04-15 08:37发布

  对于小白来讲,适配是一个比较头疼的问题,什么@1X、@2X、@3X 这些都是什么,真的比较头疼,今天主要给大家介绍一下适配的原理,让你轻轻松松了解适配问题。

  首先我们先要了解什么是PX,这个大家还算比较熟悉,像素,是构成图像的基本单位,一个图像,上面的像素点越多,你的眼睛看到的图像就越清晰。一个图像长度上有1200个像素,宽度上有900个像素,那这个图像就是由高900PX,宽1200PX组成的图像。那就引出分辨率的问题,分辨率的概念是什么?分辨率就是一个图像的屏幕竞速,这个图像是由多少个像素组成的。那高900PX,宽1200PX组成的图像的分辨率就是900×1200像素。

  我们现在讨论适配的问题,是移动端的适配,移动端的典型例子就是手机,那最近新出的iOS手机就是iPhone11,安卓手机的尺寸比较多。那iPhone11的手机屏幕分辨率是什么呢,官网显示iPhone11的手机屏幕分辨率是1792×828像素。也就是这个手机的屏幕是高度上有1792个像素,宽度上有828像素。

  下面的内容要注意啦,一定要理解。

  官网显示iPhone11的手机屏幕分辨率是1792×828像素。官网也显示iPhone 11 显示屏采用曲线优美的圆角设计,四个圆角位于一个标准矩形内。按照标准矩形测量时,屏幕的对角线长度是 6.06 英寸 (实际可视区域较小)。

  英寸是什么,是物理计量单位,像素是什么,像素跟屏幕的清晰度有关系。

  那一个换算可以把两者联系起来,那6.06英寸是对角线的长度,那对角线上有多少个像素,大家能算出来吗?

  大家还记得我们上学的时候学过的勾股定理,X²Y²=Z²,我们知道iPhone11手机的宽高的像素的,那我们就可以算出来对角线的像素值。

  1792²+828²=3211264+685584=3896848

  ²√3896848=1974.043565881969

  这个数值就是对角线上的像素点数了,那一共有6.06英寸,每个英寸上有多少个像素呢?

  1974.043565881969÷6.06=325.7497633468596

  按照四舍五入取整数,这个数值等于326。

  苹果官网的显示是iPhone11是326PPI,那PPI是什么。

  PPI是像素密度,以每英寸的像素数值评判每英寸的像素密度是多少。

  那iPhone11每英寸的像素是326,就是iPhone11的屏幕密度是326.

  今天先把这些概念给大家讲清楚,后面我们再把326PPI跟@1X、@2X、@3X联系起来。