像素密度是什么 - PPI、DPR 与屏幕清晰度全解

556 字
3 分钟
像素密度是什么 - PPI、DPR 与屏幕清晰度全解

🌟 一个词,三套概念#

“像素密度”常被笼统使用,实际涉及三个不同概念:PPI(物理密度)、DPR(设备像素比)、CSS 像素(布局单位)。理清它们,才能理解”为什么高分屏要放大”。


📐 三个概念#

概念定义决定
PPI每英寸物理像素数屏幕物理清晰度
DPR物理像素 ÷ CSS 像素缩放倍率
CSS 像素网页布局单位内容显示大小

🧮 它们怎么联动#

  • PPI 高:物理上更细腻;
  • DPR 高:1 个 CSS 像素映射到更多物理像素,界面元素物理上更大/更清晰;
  • 逻辑分辨率 = 物理分辨率 ÷ DPR。

例:物理 1080×1920、DPR=3 → 逻辑 360×640,即网页”看到”的画布是 360×640 CSS 像素。


📊 常见设备量级#

设备PPI(约)DPR
普通显示器90~1101
笔记本高分屏150~2201.25~2
手机400~5002~3

(具体以设备为准,可用PPI/DPI 计算器计算。)


🖼 对前端的影响#

  • 高清图:按 DPR 准备 2x/3x 资源;
  • 1px 边框:物理上可能是 2~3 个像素;
  • 响应式:断点基于 CSS 像素,不是物理像素;
  • 截图:手机截图通常是物理像素,比布局尺寸大 DPR 倍。

详见 DPR 是什么。


👁 清晰度的极限#

PPI 高到一定程度,人眼在正常距离就分辨不出像素了——这就是”视网膜屏”的思路。判断与观看距离有关,见视网膜屏怎么判断。


🔧 常见问题#

PPI 和 DPR 是一回事吗? 不是。PPI 是物理密度;DPR 是物理像素与 CSS 像素之比。
像素密度越高越好吗? 清晰度上是的,但更耗电、更吃性能,且超过人眼极限后提升有限。
怎么查自己设备的 DPR? 浏览器执行 `window.devicePixelRatio` 即可。

💬 总结#

像素密度涉及 PPI(物理)、DPR(缩放)、CSS 像素(布局)三层。理解它们的换算,前端适配与选购设备都会更清晰。计算用PPI/DPI 计算器与屏幕缩放/DPR。

立即体验:访问 PPI/DPI 计算器

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

最后更新于 2026-09-13,距今已过 33 天

部分内容可能已过时

相关文章 智能推荐
1
DPR 是什么 - 设备像素比与 CSS 像素计算
屏幕工具 DPR(设备像素比)是什么?本文解释物理像素、CSS 像素、逻辑分辨率的关系,给出 DPR 计算与 1x/2x/3x 资源尺寸换算,并说明 Windows 缩放 125%/150% 的影响。附在线 DPR 计算器。
2
PPI 计算器怎么用 - 屏幕像素密度计算公式与对照表
屏幕工具 PPI 怎么算?本文给出 PPI = √(宽像素²+高像素²) ÷ 对角线英寸 的公式与手算步骤,列出 1080p/2K/4K 常见分辨率对照表,解释 PPI 与 DPI、Retina 的区别与选购建议。附在线 PPI 计算器。
3
PPI 和 DPI 有什么区别 - 屏幕密度与打印分辨率别再混
屏幕工具 PPI 和 DPI 是一回事吗?本文讲清 PPI(屏幕像素密度)与 DPI(打印墨点分辨率)的区别、各自的计算场景与换算关系,避免"把屏幕当打印"的常见误区。附在线 PPI/DPI 计算器。
4
视网膜屏(Retina)怎么判断 - PPI 与观看距离
屏幕工具 视网膜屏(Retina)怎么判断?本文解释 Retina 的核心是"像素密度 + 观看距离",给出人眼分辨极限(1 角分)与 Retina 距离公式,说明它不是固定 PPI 标准。附在线 PPI/视角计算工具。
5
A3/A5 像素尺寸是多少 - 各纸张 DPI 对照
屏幕工具 A3、A5 的像素尺寸是多少?本文给出 A3/A4/A5 在 150/300/600 DPI 下的像素尺寸对照表与换算公式,并说明印刷常用 DPI 与纸张尺寸。附在线打印尺寸计算器。
随机文章 随机推荐
公告
🎉 已升级 2.0 版本,欢迎使用。
分类
标签
站点统计
文章
197
分类
24
标签
747
总字数
334,099
运行时长
0 天
最后活动
0 天前

目录