为什么出现适配？主要是更新换代的硬件屏幕分辨率不断提升，因此设计界面向上适配、向下兼容。

在开始适配话题前，先铺垫几个单位和换算：分辨率（图像分辨率ppi、设备分辨率）、像素px、磅pt、倍率。

一、单位

1.分辨率

可以从图像分辨率与显示分辨率两个方向来分类：

图像分辨率ppi，则是单位英寸中所包含的像素点数，常用表达式：水平px × 垂直px

显示分辨率，包括网屏分辨率lpi、设备分辨率dpi、角分辨率ppd等等，适配话题涉及更多的是设备分辨率dpi

2.UI领域

可以从设计与开发两方向来分类：

像素px，则是UI设计常用的虚拟单位，之所以是虚拟，是因为px不像cm、英寸等能用尺子实际测量。px只存在计算机显示领域

按操作系统不同，暂时只讨论ios、Android（安卓）、CSS前端：

磅pt，ios开发单位，同时也是印刷行业常用的单位，1pt = 1/72 英寸 = 0.35146mm

每英寸像素点dp/dip，Android（安卓）开发单位，mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi分别对应不同dpi的屏幕单位

em、ex、px、%，则是CSS前端常用单位

---

二、一稿适配

1.倍率

倍率 = ppi / dpi

在ios开发中，苹果官方规定以 ppi = 163，dpi = 163 作为开发基准

当iphone4/4s  ppi = 163，dpi = 163 时，则 1pt = 1px

当iphone5/5s/6/6s/7/8/XR   ppi = 326，dpi = 163 时，则 1pt = 2px

当iphone6+/7+/8+   ppi = 401，dpi = 154 时，则 1pt = 2.6px ≈ 3px

2.pt与px换算

pt =（ ppi / dpi ）px

同时，苹果官方也给出各型号的屏幕尺寸/寸、开发尺寸/pt ，参考倍率pt与px换算，能得出设计尺寸/px

iphone6/6s/7/8，开发尺寸375 × 667pt， ppi326 ÷ dpi163 = @2（倍率为@2，即1pt = 2px），则设计尺寸 750 × 1334 px

3.适配尺寸

一般以宽750px为基准，以iphone6/6s/7/8 设计尺寸750×1334px向上适配、向下兼容

最后总结出下表

注意，

以@2设计时，所有元素取偶数，包括字体、边距、图标图片尺寸......

以@3设计时，所有元素取同时被2和3整除的整数，即6的倍数，如6、12、18、24、30、36、42、48......

特别提醒，

向上适配iphone X/XR/XS/XS max时要考虑安全区范围，设计H5单屏界面时主操作区(和主KV)要放在750×1334px范围内，下方留白区避免在土豪机太空虚，可以加装修或“到底状态”过度

---

4.如此类推，Android的适配

市场上的android机型较apple的复杂，品牌竞争激烈、屏幕相对多标准化，但有向ios UI kit对齐趋势。

一般开发H5、微信小程序小游戏，取iphone6/6s/7/8  750 × 1334px（@2）设计界面。

明天继续更新~