前端 / 移动端 CSS 单位换算
html 根字号 (px)
父元素字号 (px) - em 用
视口宽度 (px) - vw 用
视口高度 (px) - vh 用
输入数值
源单位
dp/sp/pt/px/不同 DPI 互转
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
了解工具定位 · 使用场景 · 对比优势
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 布局时,设计稿通常按 750px 宽度标注,需换算为以 375px 逻辑宽度为基准的 rem 值。本工具输入设计稿 px 值(如 30px)和目标基准宽度(375px),直接输出对应的 rem 值(如 0.08rem),避免手动计算时因基准宽度选择错误导致页面整体偏移。
平面设计师收到客户提供的 300dpi 印刷文件(如 2480px×3508px A4 海报),需确认在屏幕 72dpi 下预览时是否清晰。本工具输入印刷 px 值与源 DPI(300),换算为屏幕显示时的等效 px 值,帮助判断文字在 100% 缩放时是否会出现锯齿或模糊,避免印刷后才发现分辨率不足。
| 维度 | 本工具 | 竞品 A (DPI Love) | 传统方法 |
|---|---|---|---|
| 数据隐私 | 纯浏览器,零上传 | 上传到服务器处理 | 依赖人工或本地软件,需自行管理文件 |
| 处理速度 | 1 秒内 | 5-10 秒(含网络延迟) | 数分钟至数小时(手动计算或设计软件操作) |
| 离线可用 | 完全离线 | 需要网络 | 取决于软件是否安装 |
| 大小限制 | 无限制(浏览器内存限制) | 通常有文件大小上限 | 无限制 |
| 收费 | 免费 | 部分功能收费或有限次免费 | 需购买设计软件(如 Photoshop) |
| 注册 | 无需注册 | 部分功能需注册 | 无需注册 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| 16dp @ 320dpi → px | 16dp = 32px (320dpi, 2x) | 典型场景:Android 开发常用 |
| 12sp @ 440dpi → pt | 12sp = 12pt (440dpi, 2.75x) | 典型场景:iOS/Android 字体换算 |
| 10pt @ 160dpi → dp | 10pt = 13.33dp (160dpi, 1x) | 边界 case:1x 基准 dpi 下 pt 与 dp 关系 |
| 1px @ 640dpi → dp | 1px = 0.25dp (640dpi, 4x) | 边界 case:超高分辨率屏幕下的最小单位 |
| 0dp → px | 0dp = 0px | 边界 case:零值输入,验证工具容错 |
| 1000sp @ 120dpi → pt | 1000sp = 1000pt (120dpi, 0.75x) | 易错 case:超大字重,可能超出屏幕 |
| 16dp @ 160dpi → pt | 16dp = 12pt (160dpi, 1x) | 易错 case:混淆 dp 与 pt 的物理尺寸关系 |
在 Android layout.xml 中直接写 `android:layout_width="50px"`在 Android layout.xml 中写 `android:layout_width="50dp"`,或使用工具将设计稿的 px 按目标 dpi 换算为 dppx 是物理像素,在不同密度屏幕上大小不同;dp 是密度无关像素,保证 160dpi 基准下物理尺寸一致。直接写 px 会导致低端屏偏大、高端屏偏小。
在 iOS 代码里写 `imageView.frame.size.width = 100` 并认为这就是 100 个物理像素在 iOS 中写 `imageView.frame.size.width = 100` 时,理解这是 100pt(点),在 @2x 屏上实际占用 200px,@3x 屏上 300pxiOS 的 UIKit 坐标系以 pt 为单位,系统自动按屏幕 scale 映射到物理像素。直接当 px 用会导致 @3x 设备上 UI 元素物理尺寸偏小。
在 Android 中给 TextView 设置 `android:textSize="16dp"`给 TextView 设置 `android:textSize="16sp"`,让文字随系统无障碍字体缩放sp = scale-independent pixel,会跟随用户设置的系统字体缩放比例;dp 不会。用 dp 设字号会忽略视障用户的大字体需求,违反无障碍设计。
从 160dpi(MDPI)设计稿拿到 `width=160px`,直接用到 320dpi(XHDPI)布局文件里写 `width=160px`换算:XHDPI 下应写 `width=320px`(或 160dp),或使用工具输入源 DPI=160、目标 DPI=320 自动计算同一物理尺寸在不同 DPI 屏幕上对应的像素数不同。直接复制数值会导致 UI 在目标屏幕上物理尺寸减半或翻倍。
将设计稿的 750px(@2x 基准 326dpi)直接除以 2 得到 375dp,认为这就是 Android 的 dp 值先确认设计稿的 DPI(如 326dpi),再用工具换算到 Android 基准 160dpi:375px × (160/326) ≈ 184dpAndroid dp 的基准是 160dpi,iOS pt 的基准是 163dpi(@1x),Web CSS px 的基准是 96dpi。不同平台基准不同,简单除以 2 只在恰好 320dpi 设计稿下近似正确。
CSS 中写 `width: 750px` 来匹配 750px 宽的设计稿使用 `width: 100%`、`max-width: 750px` 或 `width: 46.875rem`(750/16),让布局自适应不同屏幕CSS px 是参考像素(1px ≈ 1/96 英寸),不是设备物理像素。直接写死物理像素值会导致高 DPI 设备上元素物理尺寸过小,且无法适配不同视口宽度。
用户将浏览器缩放设为 150%,然后测量页面元素宽度并认为 `width: 200px` 就是 200 个物理像素理解浏览器缩放会改变 CSS px 与物理像素的映射比例;工具换算时应以 CSS px 为输出单位,而非物理像素浏览器缩放(Ctrl+滚轮)改变的是 CSS 参考像素与物理像素的比率,不是 CSS 值本身。工具输出的 px 始终是 CSS px,用户需结合当前缩放理解实际物理尺寸。
把设计稿标注的 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),若混用需调整基准值。
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.67px8 个高频疑问