移动端单位

dp/sp/pt/px/不同 DPI 互转

416 次访问

前端 / 移动端 CSS 单位换算

html 根字号 (px)

父元素字号 (px) - em 用

视口宽度 (px) - vw 用

视口高度 (px) - vh 用

输入数值

源单位

移动端 / 响应式参考

· px:绝对像素(推荐 border / shadow 等不缩放元素)

· rem:相对 html 根字号(响应式首选,整页统一缩放)

· em:相对父元素字号(嵌套时会累积)

· vw / vh:视口宽 / 高的百分比(如 1vw = 视口宽度 1%)

· vmin / vmax:取 vw/vh 较小 / 较大值(横竖屏适配)

· 设计稿 750px 移动端:1 px 设计稿 = 1 / 7.5 vw = 0.1333 vw(750 设计稿等比映射)

· iPhone 16 Pro 物理 393×852 CSS 像素 · iPhone 16 Pro Max 430×932 · iPad Air 820×1180

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

📱

App 设计稿适配

UI 设计师在 Sketch 或 Figma 中以 375pt(iPhone 逻辑分辨率)为基准完成设计,交付开发时需标注 750px(@2x)和 1125px(@3x)的切图尺寸。本工具一键将 pt 值转为不同 DPI 下的 px,避免手动计算时因 1pt=2px 还是 1pt=3px 的混淆导致切图错位,尤其适合同时输出 iOS 和 Android 两套标注的场景。

🖥️

多端预览图生成

运营人员制作社交媒体封面图时,同一张设计稿需输出 iPhone 15(1290px×2796px)、iPad Pro(2048px×2732px)、MacBook Pro 16 寸(3456px×2234px)三个版本。本工具根据各设备的逻辑分辨率与 DPI,快速换算出每种设备的实际像素尺寸,避免因缩放比例错误导致图片被裁切或留白过多。

🎨

图标资源导出

前端开发在集成图标字体或 SVG 时,需要同时准备 mdpi(1x)、hdpi(1.5x)、xhdpi(2x)、xxhdpi(3x)四套尺寸。本工具输入基准 dp 值,自动生成各密度下的 px 值,省去手动乘以 1.5、2、3 的重复计算,尤其适合有 40+ 图标需要批量导出资源包的场景。

📐

H5 页面 rem 换算

移动端 H5 开发采用 rem 布局时,设计稿通常按 750px 宽度标注,需换算为以 375px 逻辑宽度为基准的 rem 值。本工具输入设计稿 px 值(如 30px)和目标基准宽度(375px),直接输出对应的 rem 值(如 0.08rem),避免手动计算时因基准宽度选择错误导致页面整体偏移。

🔍

打印尺寸验证

平面设计师收到客户提供的 300dpi 印刷文件(如 2480px×3508px A4 海报),需确认在屏幕 72dpi 下预览时是否清晰。本工具输入印刷 px 值与源 DPI(300),换算为屏幕显示时的等效 px 值,帮助判断文字在 100% 缩放时是否会出现锯齿或模糊,避免印刷后才发现分辨率不足。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (DPI Love)传统方法
数据隐私纯浏览器,零上传上传到服务器处理依赖人工或本地软件,需自行管理文件
处理速度1 秒内5-10 秒(含网络延迟)数分钟至数小时(手动计算或设计软件操作)
离线可用完全离线需要网络取决于软件是否安装
大小限制无限制(浏览器内存限制)通常有文件大小上限无限制
收费免费部分功能收费或有限次免费需购买设计软件(如 Photoshop)
注册无需注册部分功能需注册无需注册

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
16dp @ 320dpi → px16dp = 32px (320dpi, 2x)典型场景:Android 开发常用
12sp @ 440dpi → pt12sp = 12pt (440dpi, 2.75x)典型场景:iOS/Android 字体换算
10pt @ 160dpi → dp10pt = 13.33dp (160dpi, 1x)边界 case:1x 基准 dpi 下 pt 与 dp 关系
1px @ 640dpi → dp1px = 0.25dp (640dpi, 4x)边界 case:超高分辨率屏幕下的最小单位
0dp → px0dp = 0px边界 case:零值输入,验证工具容错
1000sp @ 120dpi → pt1000sp = 1000pt (120dpi, 0.75x)易错 case:超大字重,可能超出屏幕
16dp @ 160dpi → pt16dp = 12pt (160dpi, 1x)易错 case:混淆 dp 与 pt 的物理尺寸关系

常见错误对照8 个常踩的坑 · 错误 → 修复

1. 混淆 px 与 dp 在 Android 布局中的角色

错误
在 Android layout.xml 中直接写 `android:layout_width="50px"`
修复
在 Android layout.xml 中写 `android:layout_width="50dp"`,或使用工具将设计稿的 px 按目标 dpi 换算为 dp

px 是物理像素,在不同密度屏幕上大小不同;dp 是密度无关像素,保证 160dpi 基准下物理尺寸一致。直接写 px 会导致低端屏偏大、高端屏偏小。

2. iOS 开发中混淆 pt 与 px

错误
在 iOS 代码里写 `imageView.frame.size.width = 100` 并认为这就是 100 个物理像素
修复
在 iOS 中写 `imageView.frame.size.width = 100` 时,理解这是 100pt(点),在 @2x 屏上实际占用 200px,@3x 屏上 300px

iOS 的 UIKit 坐标系以 pt 为单位,系统自动按屏幕 scale 映射到物理像素。直接当 px 用会导致 @3x 设备上 UI 元素物理尺寸偏小。

3. sp 与 dp 混用,忽略系统字体缩放

错误
在 Android 中给 TextView 设置 `android:textSize="16dp"`
修复
给 TextView 设置 `android:textSize="16sp"`,让文字随系统无障碍字体缩放

sp = scale-independent pixel,会跟随用户设置的系统字体缩放比例;dp 不会。用 dp 设字号会忽略视障用户的大字体需求,违反无障碍设计。

4. 在不同 DPI 设计稿之间直接复制数值

错误
从 160dpi(MDPI)设计稿拿到 `width=160px`,直接用到 320dpi(XHDPI)布局文件里写 `width=160px`
修复
换算:XHDPI 下应写 `width=320px`(或 160dp),或使用工具输入源 DPI=160、目标 DPI=320 自动计算

同一物理尺寸在不同 DPI 屏幕上对应的像素数不同。直接复制数值会导致 UI 在目标屏幕上物理尺寸减半或翻倍。

5. 使用错误的 DPI 基准值进行换算

错误
将设计稿的 750px(@2x 基准 326dpi)直接除以 2 得到 375dp,认为这就是 Android 的 dp 值
修复
先确认设计稿的 DPI(如 326dpi),再用工具换算到 Android 基准 160dpi:375px × (160/326) ≈ 184dp

Android dp 的基准是 160dpi,iOS pt 的基准是 163dpi(@1x),Web CSS px 的基准是 96dpi。不同平台基准不同,简单除以 2 只在恰好 320dpi 设计稿下近似正确。

6. 在 Web 响应式布局中直接使用物理像素值

错误
CSS 中写 `width: 750px` 来匹配 750px 宽的设计稿
修复
使用 `width: 100%`、`max-width: 750px` 或 `width: 46.875rem`(750/16),让布局自适应不同屏幕

CSS px 是参考像素(1px ≈ 1/96 英寸),不是设备物理像素。直接写死物理像素值会导致高 DPI 设备上元素物理尺寸过小,且无法适配不同视口宽度。

7. 忽略浏览器缩放对 CSS px 的影响

错误
用户将浏览器缩放设为 150%,然后测量页面元素宽度并认为 `width: 200px` 就是 200 个物理像素
修复
理解浏览器缩放会改变 CSS px 与物理像素的映射比例;工具换算时应以 CSS px 为输出单位,而非物理像素

浏览器缩放(Ctrl+滚轮)改变的是 CSS 参考像素与物理像素的比率,不是 CSS 值本身。工具输出的 px 始终是 CSS px,用户需结合当前缩放理解实际物理尺寸。

8. 混淆屏幕 DPI 与图片 DPI(PPI)

错误
把设计稿标注的 72 DPI 图片直接当作屏幕 DPI 来换算 dp
修复
区分:屏幕 DPI(如 326dpi)决定物理像素密度;图片 DPI(如 72dpi)仅影响打印尺寸,不影响屏幕渲染像素数。换算时只使用屏幕 DPI

图片 DPI 是元数据,用于打印或排版软件计算物理尺寸;屏幕 DPI 是硬件属性。用图片 DPI 做屏幕换算会导致结果完全错误。

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

px = dp × (dpi / 160)

变量说明

  • px — 像素值,屏幕显示最小单位
  • dp — 密度无关像素,Android 设计单位
  • dpi — 屏幕每英寸像素数,物理密度

示例

设计稿标注 160dp,在 320dpi(2x 屏)上显示:px = 160 × (320 / 160) = 320px。即 160dp 在 2x 屏上渲染为 320px,宽度正好 1 英寸。

适用范围

适用于 Android 官方定义的 dp→px 换算(基于 160dpi 基准)。iOS 的 pt→px 换算基准为 163dpi(非 160),若混用需调整基准值。

原理图

用户输入数值 + 单位(dp/pt/sp/px)浏览器内计算读取设备 DPI公式:px = dp × (dpi / 160)sp = dp (等比例缩放)pt = px × (72 / dpi)展示结果所有单位换算值(含 DPI 标注)关键说明• 所有计算在浏览器本地完成,数据不上传服务器• DPI 值通过 window.devicePixelRatio 获取,不同设备精度不同• 支持自定义 DPI 输入,覆盖模拟器 / 设计稿场景
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image

# 创建测试图像(72 DPI)
img = Image.new('RGB', (100, 100), 'red')
img.save('test_72dpi.png', dpi=(72, 72))

# 读取图像并获取 DPI
with Image.open('test_72dpi.png') as img:
    dpi = img.info.get('dpi', (72, 72))
    print(f'原始 DPI: {dpi}')

# 像素转物理尺寸(英寸)
px = 100
dpi = 72
inches = px / dpi
print(f'{px}px @ {dpi}DPI = {inches:.2f} 英寸')

# 物理尺寸转像素(目标 300 DPI)
target_dpi = 300
target_px = inches * target_dpi
print(f'{inches:.2f} 英寸 @ {target_dpi}DPI = {int(target_px)}px')
package main

import (
	"fmt"
	"math"
)

// 像素与物理尺寸转换
type UnitConverter struct {
	DPI float64
}

func (uc *UnitConverter) PxToInch(px float64) float64 {
	return px / uc.DPI
}

func (uc *UnitConverter) InchToPx(inch float64) float64 {
	return math.Round(inch * uc.DPI)
}

func main() {
	// 从 72 DPI 转换到 300 DPI
	originalDPI := 72.0
	targetDPI := 300.0
	px := 100.0

	// 先转英寸,再转目标 DPI 像素
	inches := px / originalDPI
	targetPx := math.Round(inches * targetDPI)

	fmt.Printf("%vpx @ %vDPI = %vpx @ %vDPI\n", px, originalDPI, targetPx, targetDPI)
	// 输出: 100px @ 72DPI = 417px @ 300DPI
}
// 移动端单位转换工具
const convertUnits = {
  // dp/sp/pt/px 互转
  dpToPx: (dp, dpi = 160) => (dp * dpi) / 160,
  pxToDp: (px, dpi = 160) => (px * 160) / dpi,
  spToPx: (sp, dpi = 160) => (sp * dpi) / 160,
  pxToSp: (px, dpi = 160) => (px * 160) / dpi,
  ptToPx: (pt, dpi = 160) => (pt * dpi) / 72,
  pxToPt: (px, dpi = 160) => (px * 72) / dpi,
};

// 示例:320dp 在 320dpi 屏幕上等于多少 px
const dp = 320;
const dpi = 320;
const px = convertUnits.dpToPx(dp, dpi);
console.log(`${dp}dp @ ${dpi}dpi = ${px}px`); // 320dp @ 320dpi = 640px

// 示例:12pt 字体在 160dpi 屏幕上等于多少 px
const pt = 12;
const pxFromPt = convertUnits.ptToPx(pt, 160);
console.log(`${pt}pt @ 160dpi = ${pxFromPt}px`); // 12pt @ 160dpi = 26.67px

常见问题

8 个高频疑问

为什么我输入 16sp 转换后 px 值跟网上其他工具算的不一样?
不同工具用的参考 DPI 基准可能不同。本工具默认以 160 DPI 作为 sp 基准(Android 标准),但很多工具默认用 72 DPI(印刷标准)或 96 DPI(Windows 屏幕标准)。例如 16sp 在 320 DPI 屏幕下:本工具按 160 DPI 基准算出 32px(16×320÷160),而按 72 DPI 基准的工具会算出 71px(16×320÷72)。请确认你使用的参考 DPI 值是否一致,本工具支持手动修改 DPI 值以匹配你的项目配置。
dp 和 sp 有什么区别?什么时候用 sp 什么时候用 dp?
dp(密度无关像素)和 sp(缩放无关像素)都是 Android 的尺寸单位,但 sp 额外跟随系统字体缩放设置。简单说:用于文字时用 sp(用户调大字体后文字会跟着变大),用于按钮、间距、图片等非文字元素时用 dp(保持固定物理尺寸)。本工具支持 dp/sp/pt/px 互转,转换 sp 时默认不叠加系统字体缩放(按 1:1 基准),如需模拟用户放大字体后的效果,可在 DPI 设置中手动调整缩放因子。
这个工具支持 pt 转 px 吗?pt 和 px 的换算关系是什么?
支持。pt(点)是印刷/排版单位,1pt = 1/72 英寸。px(像素)是屏幕单位,换算取决于屏幕 DPI。标准公式:px = pt × DPI / 72。例如 12pt 在 96 DPI 屏幕(常见 Windows 屏幕)下 = 16px(12×96÷72),在 72 DPI 屏幕下 = 12px。本工具默认使用 72 DPI(印刷标准),但你可以手动修改 DPI 值来匹配你的目标设备。注意:iOS 开发中 pt 实际等于逻辑像素,与这里印刷 pt 不同,iOS pt 的换算请参考工具内的 iOS 逻辑像素说明。
我输入 20dp 转 px,为什么结果是一个小数?设计稿里不能有小数值怎么办?
dp 转 px 的公式是 px = dp × (目标 DPI / 160),当目标 DPI 不是 160 的整数倍时(例如 320 DPI 下 20dp = 40px 是整数,但 401 DPI 下 20dp = 50.125px),结果就是小数。建议做法:如果设计稿要求整数 px,可以手动四舍五入(注意累积误差),或调整设计稿尺寸到整数。本工具的结果保留 2 位小数,如果你需要精确到整数,可以自行取整。另外,某些 UI 框架(如 Flutter)允许小数像素值,系统会做亚像素渲染,实际显示不会有明显问题。
这个工具转换的结果准确吗?能用在正式项目里吗?
准确度取决于你设置的 DPI 值是否正确。本工具使用标准公式(px = dp × DPI / 160、px = sp × DPI / 160、px = pt × DPI / 72),计算本身精确到 0.01px。但如果你用错了目标设备的 DPI(比如把 320 DPI 屏幕设成 480 DPI),结果就会偏差。建议:先查清楚你的目标设备或设计稿的 DPI 值(Android 可在开发者选项里查看,iOS 可在 Xcode 的 Device 信息里查看)。所有计算在浏览器内完成,不涉及网络传输,结果可靠。
这个工具能批量转换吗?我有一整个设计稿的尺寸要处理。
目前工具只支持单次输入一个数值转换。如果需要批量处理,可以分多次输入,或使用浏览器的开发者工具控制台自行计算(公式已在工具页面显示)。如果批量需求频繁,建议使用 Android Studio 的 Resource Manager 或 Sketch/Figma 的插件(如 Stark、Design Tokens)做自动转换。本工具定位是快速查单个值,适合开发中临时换算或核对设计稿上的尺寸。
为什么我输入的 10sp 在手机上显示的大小跟工具算出来的 px 不一样?
可能有三个原因:1)手机系统字体缩放不是 1x(比如用户设置了「大字体」模式),sp 会等比放大,但工具默认按 1x 缩放计算;2)手机的屏幕 DPI 不是标准值(很多国产手机用非标 DPI 如 440 替代 480),工具默认让你手动输入 DPI,如果你用了系统报告的 DPI 但实际渲染 DPI 不同就会差异;3)某些系统(如 MIUI、EMUI)对 sp 有额外缩放策略。建议:在手机开发者选项里查看「最小宽度」和「DPI」值,用这两个值在工具里重新换算。
工具会保存我的输入记录吗?能不能看历史转换?
不会保存任何输入记录。所有转换在你的浏览器内存中完成,关闭页面或刷新后数据即清除。没有历史记录功能,如果需要保留结果,建议手动复制或截图。如果你需要反复使用某些常用值(如 16sp、24dp),可以自己记下来。本工具注重隐私,不设用户系统,不收集任何数据。
选择 打开 +新窗口 esc关闭