移动端适配：从375到428的设计策略

从最早的320px，到375px，再到414px，现在主流机型已经到了428px甚至更大。

设计师做一套设计稿，开发说"适配有问题"，用户说"看着别扭"。

问题出在哪？

问题在于：很多设计师只设计了一个尺寸，然后交给开发"自动适配"。

移动端适配，不是简单的等比例缩放，而是一套系统的设计策略。

今天这篇，帮你彻底搞懂移动端适配的逻辑。

读完这篇，你会知道：

• 主流屏幕尺寸有哪些
• 不同尺寸该怎么调整设计
• 如何减少适配返工
  一、主流屏幕尺寸一览

1. iOS 设备

表1：主流iPhone屏幕尺寸

请注意： iPhone 14 Plus 和 15 Pro Max 的 428px/432px，已经成为新的主流大屏尺寸。

2. Android 设备

Android屏幕尺寸更分散，主流有：

• 360px：小米、OPPO等中端机型
• 384px：部分华为机型
• 393px：部分高端机型
• 412px：大屏Android

3. 设计基准

目前行业常用的设计基准：

常见的案例有：

• 如果用户群有大量旧机型，用375px做基准
• 如果只针对新机型，用390px做基准
• 如果同时覆盖iOS和Android，建议用375px做基准，避免Android小屏溢出

二、适配的核心逻辑

1. 哪些元素需要适配？

需要适配的元素：

• 文字字号：相对单位（rem、em、sp）
• 间距：相对单位或百分比
• 图片：响应式宽度
• 布局：弹性布局或栅格系统

不需要适配的元素：

• 图标尺寸：固定尺寸（如24px图标）
• 边框粗细：固定尺寸
• 最小点击区域：固定尺寸（≥44px）

2. 适配的两种思路

思路一：等比缩放

• 所有元素按比例放大缩小
• 适合简单页面（如落地页）
• 缺点：大屏上信息密度太低

思路二：响应式布局

• 根据屏幕宽度调整布局
• 适合复杂页面（如首页、列表页）
• 缺点：设计成本高

请注意： 真实项目中，通常是两种思路混合使用。

三、不同尺寸的适配策略

1. 375px → 390px（小增量）

变化范围：+15px（+4%）

策略：

• 文字、图标保持不变
• 左右边距适当增加（从16px → 18px）
• 卡片宽度自适应，增加的部分分配给内容区域

2. 375px → 428px（大增量）

变化范围：+53px（+14%）

策略：

• 单栏布局 → 双栏布局（如首页卡片）
• 图片尺寸放大，保持视觉平衡
• 文字行数增加，利用更多横向空间

常见的案例有：

• 首页信息流：小屏单栏，大屏双栏
• 商品列表：小屏1列，大屏2列
• 详情页：大屏增加侧边栏

3. 横屏适配

横屏时，屏幕宽度变成高度，布局逻辑完全不同。

策略：

• 底部导航 → 侧边导航
• 竖向卡片 → 横向卡片
• 视频/图片类内容：横屏专门设计

四、设计稿交付建议

1. 交付多套设计稿

复杂项目建议交付：

• 1套基准尺寸（如375px）
• 1套大屏尺寸（如428px）
• 关键页面的横屏版本

2. 标注关键断点

告诉开发，哪些尺寸需要切换布局：

3. 使用相对单位

标注时使用相对单位：

• 字号：sp（Android）或 pt（iOS）
• 间距：rem、%、vw
• 图标：dp（Android）或 pt（iOS）

五、常见适配问题及解决方法

问题1：小屏内容被截断

现象： 375px设计稿上的长标题，在320px屏幕上被截断。

原因： 只考虑了理想情况，没有测试极限情况。

解决方法：

• 标题设计时预留截断处理（...）
• 测试最小屏幕尺寸（320px）
• 为长内容设置最大高度

问题2：大屏信息密度太低

现象： 428px屏幕上，内容只占一半，另一半全是空白。

原因： 等比缩放，没有响应式布局。

解决方法：

• 大屏增加内容列数
• 卡片宽度设置上限，居中显示
• 利用空白做视觉引导，而非强制填充

问题3：安全区域被遮挡

现象： iPhone刘海屏、圆角屏上，底部按钮被遮挡。

原因： 没有预留安全区域。

解决方法：

• 底部预留34px安全区域（iPhone X及更新机型）
• 使用系统安全区域变量（safe-area-inset-bottom）
• 底部按钮上移，避免与手势条冲突

六、适配自检清单

1. 基准尺寸
□ 已确定设计基准尺寸
□ 已标注关键断点

2. 极限测试
□ 已测试最小屏幕（320px或375px）
□ 已测试最大屏幕（428px或432px）
□ 已测试横屏（如适用）

3. 安全区域
□ 底部已预留安全区域
□ 刘海屏左右已预留空间
□ 状态栏高度已适配

4. 交付规范
□ 已标注相对单位
□ 已说明布局切换逻辑
□ 已提供多套尺寸（如需要）

移动端适配，本质上是在解决一个问题：

如何让同一份内容，在不同尺寸的屏幕上，都有好的体验。

记住三个关键：

1. 选好基准尺寸（推荐375px）
2. 区分适配策略（等比缩放 vs 响应式）
3. 测试极限情况（最小屏 + 最大屏 + 横屏）

做好这三点，适配返工至少减少50%。