易翻译在不同平台上“尺寸换算”的本质，就是把设计稿的逻辑单位（如 dp、pt、CSS px）按目标设备的显示密度转换成具体像素。换算的核心公式很简单：Android 上 px = dp × densityFactor（densityFactor 如 mdpi=1、hdpi=1.5、xhdpi=2 等）；iOS 上 px = pt × scale（scale = 1、2、3）；网页上物理像素 = CSS px × devicePixelRatio（通常以 96dpi 为参考）。掌握这些公式、常用密度表和导出规范，就能把同一套视觉在各设备上稳定呈现。
先把问题拆清楚：为什么需要换算？
我想先把场景说清：设计师通常用一种“逻辑”或“抽象”单位做界面，例如 iOS 的 pt、Android 的 dp、或者网页设计的 CSS px。这样的单位好处是独立于屏幕实际像素，能让布局在不同分辨率设备上保持一致。但实际开发和资源导出要用真实像素（pixel），手机屏幕的物理像素数受设备分辨率和像素密度（DPI/PPI 或 devicePixelRatio）影响，所以必须做换算。
换算的三类常见单位
- Android dp（density-independent pixel）：与设备物理密度相关，用来作界面布局。
- iOS pt（point）：逻辑点，乘以屏幕 scale 得到像素。
- 网页 CSS px 与物理像素：浏览器里还有 devicePixelRatio 的概念，影响实际渲染像素。
核心公式与密度表（必须记住）
这部分就是“干货”，记住这些公式，很多换算都变得机械化。
Android（dp 与 px）
核心公式：
- px = dp × densityFactor
- dp = px / densityFactor
常用 densityFactor（Android 近似值）：
| 密度名 | 缩放因子 | 示例：48dp 对应 px |
| ldpi | 0.75 | 36px |
| mdpi（基准） | 1 | 48px |
| hdpi | 1.5 | 72px |
| xhdpi | 2 | 96px |
| xxhdpi | 3 | 144px |
| xxxhdpi | 4 | 192px |
iOS（pt 与 px）
核心公式：
- px = pt × scale
- pt = px / scale
常见 scale：
- 非 Retina：scale = 1
- Retina（常见 iPhone）：scale = 2
- 更高密度（iPhone Plus / Pro 等）：scale = 3
例如：设计稿一个 60pt 的图标，在 @2x 下导出要 120px，对 @3x 则是 180px。
网页（CSS px 与物理像素）
网页里有个常用参考值：1in = 96px（CSS 定义）。实际设备的物理像素 = CSS px × devicePixelRatio。
- 物理像素 = CSS px × devicePixelRatio
- devicePixelRatio 可通过 JavaScript 的 window.devicePixelRatio 读取
实操步骤：如何把设计稿转成各平台资源（一步步）
下面按顺序说，说得像我在电脑前边做边解释的那种。
1）确认设计稿单位与基准
- 设计稿通常给出：iOS 以 pt 为单位（Sketch/Figma 有 @1x、@2x 视图）；Android 以 dp 为单位或直接 px（设计稿通常按 mdpi 或 xhdpi 绘制）；网页为 CSS px。
- 问清楚设计师：基准是 1x、2x 还是 3x？图标是否需要适配圆角或安全区？
2）用公式换算 / 用导出设置
- Android：把设计的 dp 值乘以密度因子，得到不同 dpi 的 px。多数工具（Figma/Sketch/Photoshop）支持批量导出多倍图（1x、1.5x、2x、3x、4x）。
- iOS：把 pt 值乘以 scale（2、3）导出 @2x/@3x 图。App Store 要 1024×1024 的大图。
- 网页：按 devicePixelRatio 考虑高清图。常见做法是准备 1x 和 2x 资源（如 img@1x.png、img@2x.png），并用 srcset 指定。
3）导出常见图标与尺寸参考（快速清单）
这是最常被问到的，写一份常用尺寸表，平时用得着就拿来参照：
| 用途 | iOS（px） | Android（px，mdpi基准 48dp） |
| 应用商店图标 | App Store: 1024×1024 | Google Play: 512×512 |
| 主屏图标（iPhone） | 120×120 (@2x, 60pt) / 180×180 (@3x) | 48dp → mdpi 48px / hdpi 72px / xhdpi 96px / xxhdpi 144px |
| 通知/设置/Spotlight | 40pt → 80×80 (@2x) / 120×120 (@3x) 等 | 按 dp 乘密度因子导出 |
举例演算（详细示范，便于记忆）
举两个常见例子，按照费曼的做法：把概念讲清楚再代入数字。
例 1：设计稿给了 72px 的按钮，想做 Android 的各密度图
假设这 72px 是设计师在 xhdpi（2×）下画的，即等于 36dp（72px / 2）。要得到其他密度像素值：
- mdpi（1×）：px = dp × 1 = 36px
- hdpi（1.5×）：px = 36 × 1.5 = 54px
- xhdpi（2×）：px = 36 × 2 = 72px（与设计稿一致）
- xxhdpi（3×）：px = 36 × 3 = 108px
- xxxhdpi（4×）：px = 36 × 4 = 144px
例 2：设计稿给了 44pt 的 iOS 导航按钮，导出 @2x 与 @3x
- @2x：px = 44 × 2 = 88px
- @3x：px = 44 × 3 = 132px
关于字体和可访问性：sp、scaledDensity、用户字体大小
Android 字体常用 sp（scale-independent pixels），它等于 dp × scaledDensity。换算时要注意用户可调字体大小会改变 scaledDensity，因此导出图片化字体（不推荐）需要谨慎。iOS 的 Dynamic Type 也会影响文本大小，建议尽量用系统文本而非把文字烘成图片。
常见误区与注意事项（实用）
- 误区一：认为“像素就是像素”。不同设备的像素密度不同，同样的像素尺寸在另一台设备上看起来大小会不一样。
- 误区二：随便导出 2 倍图就万事大吉。某些 Android 密度有 1.5、3 等，需要按对应因子导出，避免锯齿或模糊。
- 误区三：忽视安全区与遮罩。比如 Android 的圆形/方形+圆角适配（adaptive icon）需要前后两层，iOS 有不同屏幕形状和状态栏高度。
- 实用小技巧：优先导出矢量（SVG / PDF）资源。在平台支持矢量的情况下（Android VectorDrawable、iOS PDF 向量），能显著降低导出多倍图的工作量。
工具与快速方法
别忘了工具能省事：
- 设计工具自带导出：Figma、Sketch、Adobe XD 支持按 1x/2x/3x 批量导出。
- Photoshop：用“导出为”可以指定倍率。
- Android Studio：可以将矢量资源自动生成对应的位图（但建议使用 VectorDrawable）。
- 在线换算器或脚本：团队里常写一个小脚本把 dp 列表乘以密度因子，自动生成文件名与尺寸表。
检查清单（导出前别忘了这些）
- 确认基准单位（设计稿是按哪种密度画的）
- 确认所需平台的导出倍数（iOS: @1/@2/@3；Android: ldpi~xxxhdpi）
- 为图标准备 1:1 的安全区，注意圆角裁切
- 对位图做锐化或适当压缩，避免模糊
- 若可用，优先输出矢量资源
最后说点随想（边写边想的感觉）
其实把“尺寸换算”这件事看成一套小体系就好：知道自己的基准单位、知道目标平台的密度、用公式算、用工具导出、再检验。很多时候就是重复性劳动，脚本化或用矢量能大幅减少出错。我平时会把一张“密度对照表”贴在桌边，遇到不确定的时候就照表来——省心又省时。
