181 lines
5.4 KiB
Markdown
181 lines
5.4 KiB
Markdown
# 附录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`
|