目录
- 三类法
- 三规则
- 为什么选择 iPhone6 做基准
本文大约 1000 字，阅读 5 分钟。
三类法：
将设备尺寸分成上中下三类
以前说 Android 机型复杂多样，适配是一种噩梦，现在 iPhone 适配也不简单了。iPhone 仅手机端就有这么多尺寸：
每种尺寸都要单独做一套 UI 及样式吗，显然不现实。合理的做法是将设备尺寸分为三类，只处理三类尺寸。Android 适配亦是如此。
这是淘宝团队使用的开发模式，大概分为四步：
一，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。 二，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图 三，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发 四，适配调试阶段，基于iPhone 6的界面效果，分别向上、向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。
上下调整三规则：
样式适配规则
在第四步做样式配置时，有三个规则：
文字流式，控件弹性，图片等比缩放。
图示：
如果所有尺寸下的图片资源，都使用3倍图，会不会有些浪费带宽？有没有办法改进。还有，对于同样的一个组件，如何优雅地处理其在三种尺寸下的具体样式？
这里有一个通用的分辨率样式适配方法。
对于小于等于 320 pt 的设备，这样处理样式：
代码语言：javascript复制@media screen and (max-width: 320pt) {
...
}对于大于等于 414pt 的尺寸，这样处理：
代码语言：javascript复制@media screen and (min-width: 414pt) {
...
}其它样式，不在 media 之内的，便是普通默认样式。设计师可以产出1倍、2倍、3倍图三种，然后在每种 media 内，根据需要分别做不同的引用。
选谁做基准：
为什么选择 iPhone 6 作为基准？
一，从中间尺寸向上和向下适配的时候界面调整的幅度最小。 二，往上 iPhone 6 plus有两种显示模式，标准模式分辨率为1242x2208，放大模式分辨率为1125x2001（即iPhone 6的1.5倍），不适合做基准。 三，其它相依的两个尺寸均不合适。1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜。
参考链接：
- https://blog.csdn.net/kyl282889543/article/details/100542957
- https://zhuanlan.zhihu.com/p/65845357
