DPR 是什么 - 设备像素比与 CSS 像素计算

488 字
2 分钟
DPR 是什么 - 设备像素比与 CSS 像素计算

🌟 为什么 1px 在不同屏幕上不一样大#

手机屏幕物理像素很密,如果 CSS 的 1px 等于 1 个物理像素,字会小到看不清。于是有了 DPR(Device Pixel Ratio,设备像素比):

DPR = 物理像素 ÷ CSS 像素

比如 DPR=2,则 1 个 CSS 像素对应 2×2=4 个物理像素。

星点屏幕缩放/DPR可以换算物理像素、CSS 像素与逻辑分辨率。


📐 三者关系#

概念含义
物理像素屏幕真实的发光点
CSS 像素网页布局用的逻辑像素
逻辑分辨率物理分辨率 ÷ DPR
DPR物理 / CSS

例:物理分辨率 1080×1920,DPR=3,则逻辑分辨率 = 360×640。


🖥 Windows 缩放#

Windows 的”125% / 150%“也是类似的缩放:

缩放等效 DPR
100%1.0
125%1.25
150%1.5
200%2.0

例:2560×1440 物理分辨率 @150%,逻辑分辨率约 1707×960。


🖼 1x / 2x / 3x 资源#

为高清屏准备图片时,常做多套:

资源适用尺寸
1xDPR=1100×100
2xDPR=2200×200
3xDPR=3300×300

在 CSS 里用 srcset / image-set 让浏览器按 DPR 选择。


⚠️ 常见误区#

  • DPR ≠ 分辨率:DPR 是比例,分辨率是像素数;
  • 物理像素 ≠ CSS 像素:做 1px 边框、高清图时要区分;
  • 截图尺寸:手机截图通常是物理像素,比 CSS 布局尺寸大 DPR 倍。

🔧 常见问题#

怎么查当前设备 DPR? 浏览器里 `window.devicePixelRatio` 即可;工具页也会显示。
DPR 越高越清晰吗? 在同样物理尺寸下,DPR 越高通常越清晰,但也更耗性能。
设计稿按几倍做? 移动端常见按 2x/3x 出图;以目标设备 DPR 为准。

💬 总结#

DPR 是”物理像素与 CSS 像素之比”。做高清图、1px 边框、响应式图片时,理清物理像素与 CSS 像素是关键。换算用屏幕缩放/DPR。

立即体验:访问 屏幕缩放/DPR

文章分享

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

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

部分内容可能已过时

相关文章 智能推荐
1
像素密度是什么 - PPI、DPR 与屏幕清晰度全解
屏幕工具 像素密度是什么?本文系统梳理 PPI(物理像素密度)、DPR(设备像素比)、CSS 像素与逻辑分辨率的关系,说明它们如何共同决定屏幕清晰度与网页显示效果。附在线 PPI/DPR 计算工具。
2
PPI 计算器怎么用 - 屏幕像素密度计算公式与对照表
屏幕工具 PPI 怎么算?本文给出 PPI = √(宽像素²+高像素²) ÷ 对角线英寸 的公式与手算步骤,列出 1080p/2K/4K 常见分辨率对照表,解释 PPI 与 DPI、Retina 的区别与选购建议。附在线 PPI 计算器。
3
A3/A5 像素尺寸是多少 - 各纸张 DPI 对照
屏幕工具 A3、A5 的像素尺寸是多少?本文给出 A3/A4/A5 在 150/300/600 DPI 下的像素尺寸对照表与换算公式,并说明印刷常用 DPI 与纸张尺寸。附在线打印尺寸计算器。
4
A4 像素尺寸是多少 - 300DPI/150DPI 打印像素对照表
屏幕工具 A4 在 300DPI 下是 2480×3508 像素,150DPI 是 1240×1754,600DPI 是 4961×7016。本文给出 A3/A4/A5 各 DPI 的像素尺寸、换算公式、常用 DPI 用途与图片够不够打印的判断方法。附在线打印尺寸计算器。
5
宽高比计算器 - 屏幕比例怎么算/约分与宽高互推
屏幕工具 宽高比怎么算?本文讲解如何把任意宽高约分为最简比例(如 1920×1080=16:9),并说明常见屏幕比例、由比例反推宽高的方法。附在线宽高比计算器。
随机文章 随机推荐
公告
🎉 已升级 2.0 版本,欢迎使用。
分类
标签
站点统计
文章
197
分类
24
标签
747
总字数
334,099
运行时长
0 天
最后活动
0 天前

目录