Vue：移动端 UI 如何做适配？

目录

• 三类法
• 三规则
• 为什么选择 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 的设备，这样处理样式：

@media screen and (max-width: 320pt) {
  ...
}

对于大于等于 414pt 的尺寸，这样处理：

@media screen and (min-width: 414pt) {
  ...
}

其它样式，不在 media 之内的，便是普通默认样式。设计师可以产出1倍、2倍、3倍图三种，然后在每种 media 内，根据需要分别做不同的引用。

选谁做基准：

为什么选择 iPhone 6 作为基准？

一，从中间尺寸向上和向下适配的时候界面调整的幅度最小。

二，往上 iPhone 6 plus有两种显示模式，标准模式分辨率为1242×2208，放大模式分辨率为1125×2001（即iPhone 6的1.5倍），不适合做基准。

三，其它相依的两个尺寸均不合适。1242×2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640×1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜。

参考链接：

• https://blog.csdn.net/kyl282889543/article/details/100542957
• https://zhuanlan.zhihu.com/p/65845357