写给 375px 的界面

2025-06-02 设计1639 字

移动端适配做得好不好，看三件事就够了：

底部有没有 Tab 栏
主题切换按钮在不在拇指够得着的地方
环境光暗的时候，界面有没有做适配

为什么是底部 Tab 栏

单手握持手机时，拇指的自然活动范围是一个以屏幕下缘为圆心的扇形。

屏幕顶部 1/3 是拇指的「不可达区」。把导航放那里，意味着用户要换手或者用另一只手。

所以 iOS 和 Android 的主流 App 全都把一级导航放底部。Web 应用也应该这样。

我的做法：

桌面 ≥1024px    顶部水平导航
平板 768-1023   汉堡菜单
移动 <768px     底部固定 Tab 栏（4-5 格）

移动端底栏的 5 格是：首页 / 归档 / 分类 / 标签 + 搜索。

安全区：被忽略的 iPhone 细节

全面屏手机底部有一条系统手势条（Home Indicator）。

如果你的固定底栏紧贴屏幕底缘，手势条会压在它上面：

/* 错误 */
.tabbar {
  position: fixed;
  bottom: 0;
}

/* 正确 */
.tabbar {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

env(safe-area-inset-bottom) 在 iPhone 上是 34px，在没有手势条的设备上是 0。

一行 CSS，避免手势条盖住「搜索」按钮。

375px 下的正文排版

我的正文容器在桌面是 764px，移动端自然是 100% 减去左右 padding。

字号不能缩。

很多人在移动端把正文从 17px 缩到 15px，理由是"屏幕小"。

这是反的：屏幕越小，眼睛离屏幕越近，但单行字数也越少。缩字号会让行更短、折行更多，读起来更累。

正确的移动端排版：

字号不变（17px）
行高不变（1.75）
padding 收窄（24px → 20px）
代码块允许横向滚动（不要折行）

图片的移动端处理

全宽图片在小屏幕上没问题，但要注意两点：

一、高度别用 vh 定死。 手机竖屏的 vh 包含地址栏高度，会跳。

二、懒加载是必须的。 文章第三屏往后的图片，用户可能永远不会滚到。

<img loading="lazy" decoding="async" ... />

decoding="async" 让图片解码不阻塞主线程，和 lazy 是两个维度的事，都要写。

断点的哲学

我用的断点很少：

< 768px      移动
768-1023px   平板
≥ 1024px     桌面
≥ 1280px     桌面 + 目录旁栏

只有四个，因为断点应该对应真实的设备形态，而不是随便划几刀。

平板为什么用汉堡菜单？因为 768-1023px 宽度下，水平导航 + 正文 764px 会挤，但底栏又显得空间浪费。汉堡菜单是这个形态下的正确答案。

触控目标

所有可点击元素的触控目标至少 44×44px（iOS HIG 的标准）。

我的搜索按钮是 32×32px 的图标，但外层有 16px 的点击热区扩展：

.search-trigger {
  width: 32px;
  height: 32px;
  position: relative;
}

.search-trigger::after {
  content: '';
  position: absolute;
  inset: -8px;
}

视觉小，触控大。这是图标按钮的标准做法。

一句话

移动端适配不是"能用"，是单手、通勤、暗光下都不难受。

做到这三点，就已经超过 80% 的网站了。