# Figma iOS Android pt dp sp 响应式设计规范卡

把 Figma 像素值换算成平台正确单位并生成开发者规范卡：iOS pt（@1x/@2x/@3x 及各倍率渲染 px）、Android dp/sp（mdpi…xxxhdpi 全密度桶渲染表、字体缩放）、Web rem/vw 与 clamp() 流式排版片段；按 iOS 44pt / Android 48dp / WCAG 44px 与 24px 审计最小触控目标，并标注 Material 窗口类与 Tailwind 断点。

> 标准页面: https://elysiatools.com/zh/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card

- **分类:** Design

- **关键词:** figma 转代码, pt 转换, dp 转换, rem, 触控目标, 密度桶, 设计规范

## 概述

换算基于已验证常量：iOS pt = px ÷ 倍率（@1x=1/@2x=2/@3x=3，163ppi 为历史基准）；Android dp = px ÷ 密度（mdpi 160=1x、hdpi 240=1.5x、xhdpi 320=2x、xxhdpi 480=3x、xxxhdpi 640=4x），sp 在 dp 之上叠加用户字体缩放（原生档位 0.85/1.0/1.15/1.3，Android 14+ 非线性至 200%）；Web rem = px ÷ 根字号（默认 16px）、vw = px ÷ 视口 × 100，clamp(MIN, VAL, MAX) 解析为 max(MIN, min(VAL, MAX))。触控目标最小值：Apple HIG 44×44pt、Material 48×48dp、WCAG 2.5.5（AAA）44×44 CSS px、WCAG 2.5.8（AA）24×24 CSS px。响应式标注：Material 窗口类 compact <600dp / medium 600–839dp / expanded ≥840dp；Tailwind 断点 640/768/1024/1280/1536px。

## 输入项

- **Figma 像素值** (number): e.g. 48
- **设计缩放倍率** (select)
- **元素角色** (select)
- **根字号（px）** (number)
- **视口宽度（px）** (number)

## 适用场景

- 将 Figma 中的 px 尺寸交付为 iOS pt、Android dp 或 Web rem。
- 检查按钮、图标等元素是否达到 iOS、Android 和 WCAG 的最小触控目标。
- 为不同屏幕密度、视口宽度和响应式断点整理开发规范。

## 工作原理

- 输入 0.5 至 10000 范围内的 Figma 像素值，并选择 1x、2x 或 3x 设计倍率。
- 工具按所选倍率换算 iOS pt 和 Android dp，同时展示 mdpi 至 xxxhdpi 的渲染尺寸。
- 根据元素角色提供一般尺寸、文字大小或触控目标相关结果，并结合根字号计算 rem 与 sp 参考值。
- 使用视口宽度计算 vw，生成流式 clamp() 片段，并标注触控标准、Material 窗口类和 Tailwind 断点。

## 使用案例

- 产品设计师将 Figma 的 @2x 画布尺寸转换为 iOS 和 Android 的逻辑单位，交付统一标注。
- 移动端开发者检查按钮尺寸是否满足 Apple HIG、Material 和 WCAG 的触控目标要求。
- 前端开发者根据 px、根字号和视口宽度整理 rem、vw、clamp() 及响应式断点规范。

## 常见问题

### 需要输入什么？

必填项是 Figma 像素值；还可以选择设计缩放倍率、元素角色、根字号和视口宽度。

### 工具如何计算 iOS pt？

iOS pt 等于 px 除以设计倍率，支持 1x、2x 和 3x。

### 工具如何计算 Android dp？

Android dp 按屏幕密度换算，并提供 mdpi、hdpi、xhdpi、xxhdpi 和 xxxhdpi 渲染表。

### 可以检查触控目标吗？

可以。选择“触控目标”后，结果会对照 iOS 44pt、Material 48dp 以及 WCAG 44px 和 24px 标准进行审计。

### Web rem 和 vw 使用哪些参数？

rem 使用输入的根字号计算，默认根字号为 16px；vw 使用输入的视口宽度计算，默认视口宽度为 1440px。

## 相关工具

- [哈希算法对比器](https://elysiatools.com/zh/tools/hash-algorithm-comparator): 对同一输入同时用 MD5、SHA-1、SHA-256、SHA-512、BLAKE2b、BLAKE3 哈希并横向对比：输出长度、十六进制/Base64 摘要、安全状态（已破解/现代）以及相对速度基准。适合教学、选择哈希算法或核对校验和。
- [OKR 与 KPI 树状分解器](https://elysiatools.com/zh/tools/okr-tree-decomposer): 把公司级 Objective 逐级下钻到部门→团队→个人,每个节点设权重/目标值/当前值,下层加权汇总为上层完成度。输出可视化树状结构 + Markdown,可复制到文档。
- [血清阴离子间隙 (AG) 计算器](https://elysiatools.com/zh/tools/anion-gap-calculator): 计算血清阴离子间隙 AG = Na⁺ − Cl⁻ − HCO₃⁻ (mmol/L)，并可选用 Na⁺ + K⁺ 公式与白蛋白校正。AG 升高（约 >12）提示未测阴离子蓄积（乳酸、酮体、甲醇/乙二醇、水杨酸、肾衰竭；口诀 GOLD-MARK）。AG 正常（8–12）的代谢性酸中毒为高氯性，考虑腹泻、肾小管酸中毒、大量生理盐水输注。AG 偏低（<3–6）多见低白蛋白血症，也见于高钙/高镁、锂、IgG 骨髓瘤（阳离子型副蛋白）、溴化物假性高氯。低白蛋白时用白蛋白校正公式 AG_corr = AG + 2.5×(4.0 − 白蛋白) 避免漏诊高 AG 酸中毒。来源 Kraut CJASN 2007、Figge 1998、MDCalc。需结合血气与临床。不构成医疗建议。
- [缩进列表转 ASCII 目录树](https://elysiatools.com/zh/tools/ascii-tree-from-indented-list): 把 2 空格 / 4 空格 / Tab 缩进的层级列表（Markdown bullet、- * 1. 前缀可选）渲染为可复制的 ASCII 目录树。支持 Unicode 方框与经典 ASCII 两种风格，以及整根纵线、行尾空格、叶节点方括号等开关。
- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [加密 PDF 转换器](https://elysiatools.com/zh/tools/encrypted-pdf-converter): 输入正确密码后解析受保护 PDF，并导出为 Markdown、JSON 或文本
- [Jupyter Notebook 可重现脚本线性化器](https://elysiatools.com/zh/tools/jupyter-notebook-to-reproducible-script-linearizer): 把 .ipynb 转成带 # %% 标记的 Python 脚本，并检测乱序、隐藏和已删除状态
- [Markdown转PDF转换器](https://elysiatools.com/zh/tools/markdown-to-pdf-converter): 将Markdown文件转换为PDF文档，支持格式化、语法高亮和样式

## 示例

- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Java 文件操作示例](https://elysiatools.com/zh/samples/android-file-operations-java): Android Java 文件操作示例，包括文本文件读写、文件复制移动、目录遍历和文件验证
- [Android Kotlin 文件操作示例](https://elysiatools.com/zh/samples/android-file-operations-kotlin): Android Kotlin 文件操作示例，包括文本文件读写、文件复制移动、目录遍历和文件验证

## 相关内容

- [文本大小写、编码与规范化转换工具](https://elysiatools.com/zh/hubs/text-convert): 在一个专题中比较文本大小写转换、全半角转换、编码转换、Quoted-Printable 处理和行内文本规范化工具。
- [Markdown 导出、OCR 与文档转换工具](https://elysiatools.com/zh/hubs/markdown-convert): 在一个专题中比较 Markdown 转 PDF、PDF 转 Markdown、OCR、幻灯片导出和结构化 Markdown 转换工具，适合文档发布流程。
- [Text 工具专题](https://elysiatools.com/zh/hubs/text-utility): 探索 33 个围绕 text 的 utility 工作流工具，快速找到相近能力。
- [文本分析、可读性与内容检查工具](https://elysiatools.com/zh/hubs/text-analyze): 在一个专题中比较文本统计、语言识别、可读性评分、情感分析、内容审核和模式分析工具。