移动端适配方案

Posted 2021-03-18 huancheng

还原设计稿，也就是如何适配移动端繁杂的屏幕大小。

通常而言，设计师只会给出单一分辨率下的设计稿，而我们要做的，就是以这个设计稿为基准，去适配所有不同大小的移动端设备。

在此之前，有一些基础概念需要理解。

设备独立像素

 以 iPhone6/7/8为例，这里我们打开 Chrome 开发者工具：

 

 

 

这里的 375 * 667 表示的是什么呢，表示的是设备独立像素（DIP），也可以理解为 CSS 像素，也称为逻辑像素：

设备独立像素 = CSS 像素 = 逻辑像素

如何记忆呢？这里使用 CSS 像素来记忆，也就是说。我们设定一个宽度为 375px 的 div，刚好可以充满这个设备的一行，配合高度 667px ，则 div 的大小刚好可以充满整个屏幕。

物理像素

ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度（因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高）

 

 

 

可以看到，iPhone7 的分辨率是 1334 x 750，这里描述的就是屏幕实际的物理像素。

物理像素，又称为设备像素。显示屏是由一个个物理像素点组成的，1334 x 750 表示手机分别在垂直和水平上所具有的像素点数。通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt。

设备像素 = 物理像素

DPR(Device Pixel Ratio) 设备像素比

DPR（Device Pixel Ratio） 设备像素比，这个与我们通常说的视网膜屏（多倍屏，Retina屏）有关。

设备像素比描述的是未缩放状态下，物理像素和设备独立像素的初始比例关系。

计算公式： DPR = 物理像素 / 设备独立像素

我们套用一下上面 iPhone7 的数据 （750 / 375 = 2） dpr = 2

 

可以得到 iPhone7 的 dpr 为 2。也就是我们常说的视网膜屏幕。

 

视网膜（Retina）屏幕是苹果公司"发明"的一个营销术语。 苹果公司将 dpr > 1 的屏幕称为视网膜屏幕。

 

 

 在视网膜屏幕中，以 dpr = 2 为例，把 4(2x2) 个像素当 1 个像素使用，这样让屏幕看起来更精致，但是元素的大小本身却不会改变：

 

 

 我们再来看看 iPhone XS Max： 它的 CSS 像素是 896 x 414，很容易得出 iPhone XS Max 的 dpr 为 3。

总结：上面三个概念（CSS像素、设备独立像素、DPR）是我觉得比较重要的，还有一些其他比较重要的概念 PPI、DPI 不影响后续的内容，可以自行去加深理解。