---
title: "写给 375px 的界面"
description: "移动端不是缩小版桌面。底部 Tab 栏、可达的拇指区、iOS 安全区——这些细节决定了移动端体验的下限。"
canonical_url: "https://www.kemiaosw.top/posts/mobile-first-375"
---

> Index of every page on this site: [llms.txt](https://www.kemiaosw.top/llms.txt)

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

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

## 为什么是底部 Tab 栏

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

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

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

我的做法：

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

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

## 安全区：被忽略的 iPhone 细节

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

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

```css
/* 错误 */
.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 包含地址栏高度，会跳。

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

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

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

## 断点的哲学

我用的断点很少：

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

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

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

## 触控目标

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

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

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

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

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

## 一句话

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

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

## Sitemap

See the full [sitemap](https://www.kemiaosw.top/sitemap.md) for all pages.