5.4 KiB
5.4 KiB
附录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
换算公式：
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]
执行顺序如下：
- 先保留原始
px数值 - 判断它属于“可缩放布局尺寸”还是“需保留绝对质感的细节尺寸”
- 前者按公式转
rpx，后者保留px - 真机对照后再微调
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 值时的处理模板
若值用于横向/纵向布局比例 —— 优先转 rpx
若值用于细节质感、边框、阴影、微位移 —— 优先保留 px
若值与安全区/导航/系统尺寸有关 —— 不走公式，走系统信息
A.5 负值、分数、百分比
A.5.1 负值
若出现：
-mt-2-top-1/2-translate-x-1/2
规则：
- spacing 负值：使用相同绝对值 token，加负号
- 百分比 / transform：保持原表达式，不强行转成
rpx
示例：
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 执行准则
- 遇到 spacing scale 中已有的值，优先查本表。
- 遇到 arbitrary 值，先判断“布局型”还是“质感型”。
- 遇到疑似导航、安全区、浮层微调值，不要硬转
rpx。 - 任何转换后若导致 412 宽真机对不上 H5，应以视觉验收为准做修正。
A.7 附录结论
本表的角色是：
- 统一 token
- 减少页面间尺寸漂移
- 提高 AI 批量迁移的一致性
本表不是：
- 取代视觉验收
- 否定混合单位策略
- 允许把所有
px一刀切换成rpx