# 附录A：Spacing 与尺寸字典 v3.0

> 角色：默认尺寸 token 候选表  
> 用途：把 Tailwind 的 spacing / size 类，转换成适合微信小程序的 `rpx` / `px` 实现  
> 重要声明：本表是**默认候选表**，不是所有尺寸都必须机械套表

---

## A.1 使用边界

### A.1.1 适用范围

以下场景可优先使用本表：

- 容器内外边距：`p-*`、`px-*`、`py-*`、`m-*`
- 列表、卡片、模块之间的块级间距
- 主容器宽高、卡片尺寸、按钮高度
- Flex/Grid 间隙：`gap-*`
- 一般性的 `top/right/bottom/left`
- 来自 spacing scale 的固定 `w-*` / `h-*`

### A.1.2 不适用范围

以下场景不要机械套表：

- `1px` 发丝线
- 阴影 blur / spread
- 小图标绘制尺寸
- 小控件（星星、状态点、勾选框）尺寸
- 绝对定位的 1~4px 微调
- 安全区 / 状态栏补偿
- 任何“在 412 宽真机上需要与 H5 绝对贴齐”的细节点

---

## A.2 换算基础

项目验收基准宽度：**412 CSS px**

换算公式：

```text
rpx = px × (750 / 412)
    ≈ px × 1.8204
```

默认取值策略：

- 默认四舍五入到整数 `rpx`
- 同一 token 全项目保持一致
- 真机视觉偏差明显时，允许修正 1~2rpx

---

## A.3 默认 spacing → rpx 映射表（26 个值）

| Tailwind 值 | rem / px | CSS px | 项目默认 rpx token | 推荐用途 | 备注 |
|---|---:|---:|---:|---|---|
| `0.5` | `0.125rem` | 2 | 4rpx | 极小间距 | 仅限布局缝隙，不建议用于描边 |
| `px` | `1px` | 1 | 2rpx | 极细尺寸 | 如需发丝线，优先直接保留 `1px` |
| `1` | `0.25rem` | 4 | 8rpx | 极小 padding / gap | 常用 |
| `1.5` | `0.375rem` | 6 | 12rpx | 小间距 | 常用 |
| `2` | `0.5rem` | 8 | 14rpx | 小 padding / gap | 常用 |
| `2.5` | `0.625rem` | 10 | 18rpx | 小间距 | 常用 |
| `3` | `0.75rem` | 12 | 22rpx | 小按钮内边距 / 块间距 | 常用 |
| `3.5` | `0.875rem` | 14 | 26rpx | 中小尺寸 | 常用 |
| `4` | `1rem` | 16 | 30rpx | 主流 padding / gap | 高频 |
| `5` | `1.25rem` | 20 | 36rpx | 中等间距 | 高频 |
| `6` | `1.5rem` | 24 | 44rpx | 主模块间距 | 高频 |
| `7` | `1.75rem` | 28 | 52rpx | 中等尺寸 | 次高频 |
| `8` | `2rem` | 32 | 58rpx | 大 padding / 高度 | 高频 |
| `9` | `2.25rem` | 36 | 66rpx | 中大尺寸 | 常用 |
| `10` | `2.5rem` | 40 | 72rpx | 输入框 / 按钮高度候选 | 高频 |
| `11` | `2.75rem` | 44 | 80rpx | 点击区域 / 高度 | 高频 |
| `12` | `3rem` | 48 | 88rpx | 大按钮 / 模块高度 | 高频 |
| `14` | `3.5rem` | 56 | 102rpx | 中大控件尺寸 | 常用 |
| `16` | `4rem` | 64 | 116rpx | 卡片图标容器 / 大尺寸 | 常用 |
| `20` | `5rem` | 80 | 146rpx | 大控件 / 空态图 | 常用 |
| `24` | `6rem` | 96 | 174rpx | 大尺寸块 | 常用 |
| `28` | `7rem` | 112 | 204rpx | 大图容器 | 次高频 |
| `32` | `8rem` | 128 | 232rpx | 模块大尺寸 | 次高频 |
| `40` | `10rem` | 160 | 292rpx | 大留白 / 偏移 | 仅布局层 |
| `64` | `16rem` | 256 | 466rpx | 大容器高度 | 慎用 |
| `72` | `18rem` | 288 | 524rpx | 宽容器 / 大图 | 慎用 |

---

## A.4 Arbitrary spacing / size 处理规则

### A.4.1 基本规则

当 H5 使用 arbitrary 值，例如：

- `h-[38px]`
- `top-[44px]`
- `w-[86px]`
- `px-[13px]`

执行顺序如下：

1. 先保留原始 `px` 数值  
2. 判断它属于“可缩放布局尺寸”还是“需保留绝对质感的细节尺寸”  
3. 前者按公式转 `rpx`，后者保留 `px`  
4. 真机对照后再微调

### A.4.2 已知项目中出现的 arbitrary 值（来自旧桥文档）

| Tailwind class | 原始值 | 默认转换建议 | 类型判断 | 备注 |
|---|---:|---|---|---|
| `h-[38px]` / `w-[38px]` | 38px | `70rpx` | 可缩放布局尺寸 | 常用于按钮 / 图标外框 |
| `top-[44px]` | 44px | `80rpx` | 条件项 | 若与导航/状态栏相关，优先保留 `px` 或走系统信息 |
| `min-h-[2.5rem]` | 40px | `72rpx` | 可缩放布局尺寸 | 可直接转 |
| `max-h-[70vh]` | 70vh | 保留 `70vh` | 条件项 | 仅在主规范允许使用 `vh` 的页面采用 |

### A.4.3 遇到新 arbitrary 值时的处理模板

```text
若值用于横向/纵向布局比例 —— 优先转 rpx
若值用于细节质感、边框、阴影、微位移 —— 优先保留 px
若值与安全区/导航/系统尺寸有关 —— 不走公式，走系统信息
```

---

## A.5 负值、分数、百分比

### A.5.1 负值

若出现：

- `-mt-2`
- `-top-1/2`
- `-translate-x-1/2`

规则：

- spacing 负值：使用相同绝对值 token，加负号
- 百分比 / transform：保持原表达式，不强行转成 `rpx`

示例：

```css
margin-top: -14rpx;
transform: translateX(-50%);
```

### A.5.2 百分比 / 分数

以下值保持百分比表达：

- `w-1/2` → `width: 50%`
- `w-full` → `width: 100%`
- `left-1/2` → `left: 50%`

不要把这类值换算成固定 `rpx`。

---

## A.6 AI 执行准则

1. 遇到 spacing scale 中已有的值，优先查本表。  
2. 遇到 arbitrary 值，先判断“布局型”还是“质感型”。  
3. 遇到疑似导航、安全区、浮层微调值，不要硬转 `rpx`。  
4. 任何转换后若导致 412 宽真机对不上 H5，应以视觉验收为准做修正。

---

## A.7 附录结论

本表的角色是：

- **统一 token**
- **减少页面间尺寸漂移**
- **提高 AI 批量迁移的一致性**

本表不是：

- 取代视觉验收
- 否定混合单位策略
- 允许把所有 `px` 一刀切换成 `rpx`