APP适配及标注总结

一、区分三个概念（物理像素、渲染像素、逻辑像素）

1.1、物理像素：在同一个设备上，它的物理像素是固定的，由屏幕本身硬件上的像素点决定，如15.4英寸的mac电脑物理像素为2880x1800

1.2、渲染像素：是系统基于逻辑像素进行对应倍增而得到的结果。

同一图标在iPhone3gs和iPhone4上的渲染效果

1.3、逻辑像素：是控制屏幕容纳内容多少的一个单位，逻辑像素的单位是pt。

调整分辨率改变的是逻辑像素，但调整结果在屏幕上显示的是渲染像素

总结一下：

物理像素不能决定屏幕显示内容的多少，但可以提升画面精细程度，物理像素点即ppi，像素点越多，画面越精细。

渲染像素是经过系统处理后我们看见的图像，可以理解为手机截图。

开发写页面时须根据逻辑像素进行编写，同样调整电脑分辨率变化的也是逻辑像素。

下图是iphone逻辑像素，渲染像素以及倍率的关系：

可以看出：倍率=渲染像素/逻辑像素

二、两种适配方式

2.1、倍率适配

应用于逻辑像素相同但倍率不同的设备。例如iPhone6的标准模式适配到plus的放大模式，前面也说过逻辑像素相同就是界面容纳内容的多少相同，所以这个适配不存在元素的数量、文本行数等的改变，只需根据倍率合理缩放即可。

这种适配应注意两个细节，一个是分割线，我们知道设计时一般分割线是1px，但是缩放后就会变成1.5px或2px，所以需要单独调整分割线至1px。还有一个需要注意的是图标，需要保证图标不出现虚边，当图标描边数值是奇数并且是外描边或内描边时，缩放1.5倍会出现半像素虚边。或者偶数居中描边时，缩放1.5倍若变为奇数描边也会出现虚边。

2.2、逻辑像素适配

应用于倍率相同，逻辑像素不同的设备，因为倍率是相同的，所以不存在整体界面的缩放，逻辑像素不同，即就是屏幕显示内容多少不同，这就需要我们从宽度（文字流、弹性控件、等比缩放）和高度（登陆页、音乐播放界面）进行逐一适配。

但是我们经常遇到的倍率不同逻辑像素也不同的适配，这就要先把他们转化成相同倍率再进行适配，切记，倍率不同，不可以直接拉伸，举个例子，比如我要将iPhone6适配到iPhone6+：

可见，通过直接拉伸750px至1242px放大的并不是1.5倍，1242/750=1.656，所以放大的比1.5大，会导致页面内元素统一变大。

正确的适配步骤有两种：

第一种方法是先将iPhone6调整为与iPhone6+倍率相同也就是放大至150%，然后界面内元素不变将 1125*2001调整为1242*2208，最后调整页面内容的间距等  

第二种方法是将iPhone 6+调整为与iPhone6倍率相同也就是乘以2/3 ，然后将iPhone6的界面挪到iPhone6+里并调整内容间距，最后将iPhone6+放大至1242*2208

其实两种适配方法道理相同，不是将A转化为B的倍率，就是将B转化为A的倍率，然后调整页面内容。

三、适配三原则

3.1、文字流

文字流比较容易适配，从750变为1242文字的宽度随屏幕变大，同时行数相应变少。

3.2、弹性控件

此类弹性控件调整左右间距适配即可（比如iOS中的设置页面）

上图所示十字交互类弹性控件，通过调整控件的数量进行适配。

3.3、等比缩放

等比缩放比较容易理解，主要是banner图，比如在大屏上图片比例是16:9，那在小屏上保持16:9就可以了。

四、标注

合理的标注应该是清晰、简洁、并且具有适配价值的，如果标注乱七八糟，每个间距，大小都进行标注的话，会使开发一头雾水，具体的标注从文字流，弹性控件和图片进行说明。

4.1、文字流标注

基本的文字颜色大小，粗细默认常规，字体默认苹方，特殊情况需要标注。文字其余标注如下：

4.2、弹性控件标注

弹性控件不要标注成固定不变的，变化的参数不能标注，如果把所有参数都标注的话会导致界面无法适配。不同的标注方式对应的适配结果也各不相同。

第一种标注方式：页边距和每个图标左右间距固定，那么适配就会改变图标的大小尺寸。

第二种标注方式：页边距和图标大小固定，那么适配会改变图标间距。

第三种标注方式：设计不用标注直接说明等比缩放，那么整个内容都会随屏幕宽度变化进行缩放。

4.3、图片

一张图片显示的宽度等于三张横排时的两张宽度加一个间距20px

图片比例为2:1，圆角10px

所以适配可不止是前端的事情，前端怎么实现和我们设计是怎么标注的密切相关，只有标注合理才能更有效地保证适配的落地~