面试官：说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

article/2025/10/11 6:38:04

一、背景

在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素

这会造成一种错觉，我们会认为css中的像素就是设备的物理像素

但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的

当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显示效果却有很大差异

这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念

二、介绍

CSS像素

CSS像素（css pixel, px）: 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位

在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位

px是一个相对单位，相对的是设备像素（device pixel）

一般情况，页面缩放比为1，1个CSS像素等于1个设备独立像素

CSS像素又具有两个方面的相对性：

  • 在同一个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（比如调整屏幕的分辨率）

  • 在不同的设备之间，每1个 CSS 像素所代表的设备像素是可以变化的（比如两个不同型号的手机）

在页面进行缩放操作也会 引起css中px的变化，假设页面放大一倍，原来的 1px 的东西变成 2px，在实际宽度不变的情况下1px 变得跟原来的 2px 的长度（长宽）一样了（元素会占据更多的设备像素）

假设原来需要 320px 才能填满的宽度现在只需要 160px

px会受到下面的因素的影响而变化：

  • 每英寸像素（PPI）

  • 设备像素比（DPR）

设备像素

设备像素（device pixels），又称为物理像素

指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已

可以参考公园里的景观变色彩灯，一个彩灯(物理像素)由红、蓝、绿小灯组成，三盏小灯不同的亮度混合出各种色彩

从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为pt

设备独立像素

设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素

在javaScript中可以通过window.screen.width/ window.screen.height 查看

比如我们会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏，我们把它调为 1440x900”，这里的“分辨率”（非严谨说法）指的就是设备独立像素

一个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰

至于为什么出现设备独立像素这种虚拟像素单位概念，下面举个例子：

iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸，但 iPhone 3GS 的分辨率是 320x480，iPhone 4/4s 的分辨率是 640x960

这意味着，iPhone 3GS 有 320 个物理像素，iPhone 4/4s 有 640 个物理像素

如果我们按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位

我们统一 iPhone 3GS 和 iPhone 4/4s 都是 320 个虚拟像素，只是在 iPhone 3GS 上，最终 1 个虚拟像素换算成 1 个物理像素，在 iphone 4s 中，1 个虚拟像素最终换算成 2 个物理像素

至于 1 个虚拟像素被换算成几个物理像素，这个数值我们称之为设备像素比，也就是下面介绍的dpr

dpr

dpr（device pixel ratio），设备像素比，代表设备独立像素到设备像素的转换关系，在JavaScript中可以通过 window.devicePixelRatio 获取

计算公式如下：

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素

如下图所示：

当dpr为3，那么1px的CSS像素宽度对应3px的物理像素的宽度，1px的CSS像素高度对应3px的物理像素高度

ppi

ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像

计算公式如下：

三、总结

无缩放情况下，1个CSS像素等于1个设备独立像素

设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变

PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）

在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素

设备像素比（dpr） = 设备像素 / 设备独立像素

每英寸像素（ppi），值越大，图像越清晰

参考文献

  • https://developer.mozilla.org/zh-CN/docs/Glossary/CSS_pixel

  • https://hijiangtao.github.io/2017/07/09/Device-Viewport-and-Pixel-Introduction/



-- The End --

系列正在更新：4/20

点击下方卡片解锁更多

创作不易，星标、点赞、在看 三连支持


http://chatgpt.dhexx.cn/article/SXSCepkR.shtml

相关文章

dpr（设备像素比）与 移动端适配

dpr（设备像素比）与 移动端适配

在上一篇文章中（使用 rem 实现移动端的自适应布局），我们讲到 iphone6s 的屏幕宽度为 375px，我们拿到的视觉稿也是基于iphone6s 设计的，但是设计稿的宽度却是 750px，这是为什么呢？ 原因就是 ipho…
阅读更多...
新一代Web技术栈的演进：SSR/SSG/ISR/DPR都在做什么？

新一代Web技术栈的演进：SSR/SSG/ISR/DPR都在做什么？

在开始阅读之前，先解释一下文章里用到的英文缩写： CSR：Client Side Rendering，客户端（通常是浏览器）渲染；SSR：Server Side Rendering，服务端渲染；SSG&#xf…
阅读更多...
Dapr

Dapr

环境： window10 docker desktop dotnet 5.0 一、安装 Dapr CLI 打开 Windows PowerShell 或 cmd ，运行以下命令以安装 Dapr CLI，并添加安装路径到系统环境变量中。 powershell -Command "iwr -useb https://raw.githubusercontent.…
阅读更多...
当我们在讨论设备像素比（device pixel ratio，dpr）的时候我们在讨论什么？

当我们在讨论设备像素比（device pixel ratio，dpr）的时候我们在讨论什么？

目录 0. 为什么要写这篇文章？1. 设备像素比的问题在哪里？1.1. 不同的论述导致不同的理解1.2. 设备独立像素与CSS像素1.3. 小结 2. 设备像素比 设备物理像素/CSS像素，真的正确吗？2.1. PC端验证2.2. 手机端验证2.3. 出了什么问题&a…
阅读更多...
动态dp

动态dp

以前学树型dp留下的题目，没有写，然后过了几个月后又回来写了这道题 战略游戏 这是一道典型的最小点覆盖的模板，蒟蒻采用的是树型dp的做法 设 \(f[i][0/1]\) 在以 \(i\) 为根的子树中，选或不选当前这个点所需要的最少的点 那么转移…
阅读更多...
移动端适配dpr

移动端适配dpr

1. 移动端适配的代码（设计稿iPhone6）如下： (function (doc,win) {// seMetaTagScale(doc, win)var fn function () { var deviceWidth doc.documentElement.clientWidth; // css逻辑像素，不是物理像素if (deviceWidth > 82…
阅读更多...
移动端布局(一)dp、dip、PPI、dpr、图片模糊

移动端布局(一)dp、dip、PPI、dpr、图片模糊

注: 此篇文章引用多篇文章，在文章的结尾处有注明文章的来源 高清屏 即高清屏,把更多的像素压缩至一块屏幕里，从而达到更高分辨率显示的细腻程度，使人眼无法分辨出单个的像素。 物理像素(dp) 物理像素，设备的硬件像素&#xff…
阅读更多...
不同设备屏幕尺寸和DPR适配

不同设备屏幕尺寸和DPR适配

为什么需要适配 目前市面上设备屏幕属性十分多样化（宽度和DPR并不一致），而作为设计和前端开发，无法为每个尺寸的设备单独设计一套UI并将其转为前端代码，这不现实。所以我们需要一套方案来将一套设计稿完美呈现在不同尺…
阅读更多...
DPR-ERR-2109

DPR-ERR-2109

问题（摘要） [Simplified Chinese] 该技术文档说明了如何解决在安装和配置IBM Rational Common Reporting服务器时可能发生的错误:"DPR-ERR-2109 The dispatcher cannot service the request at this time. The dispatcher is still initializing. …
阅读更多...
DPR和REALM论文笔记

DPR和REALM论文笔记

DPR(2020 EMNLP) 该论文的模型主要是一个双塔结构如下所示： 整个模型的训练数据D包含m个例子，其中每个例子由一个问题 q i q_i qi​、一个相关段落 p i p_i^ pi​、n个不相关段落 p i , 1 − , ⋯ , p i , n − p_{i,1}^-,\cdots,p_{i,n}^- pi,1−​,⋯…
阅读更多...
dpr单位

dpr单位

1px dpr^2 * dp 这个是不是有问题？ 结尾的总结： 1px dpr^2 * dp 这个是不是有问题？ 以下这个等式不成立吧: 320*568 px 2^2 * 1136*640 1px dpr ^2 * dp 是平面上的像素换算，但实际开发当中使用更多的是长度上的换算&#x…
阅读更多...
图文并茂带你弄懂物理分辨率、分辨率、物理像素、逻辑像素、dpr、ppi

图文并茂带你弄懂物理分辨率、分辨率、物理像素、逻辑像素、dpr、ppi

目录 物理分辨率和分辨率 什么是物理像素 什么是CSS像素 什么是设备像素比 什么是标清屏和高清屏 缩放 什么是PPI（DPI） 物理分辨率和分辨率 首先得知道物理分辨率和分辨率是2个概念，可别混淆。 物理分辨率（标准分辨率&am…
阅读更多...
DPSR

DPSR

testsets/real_imgs/LR 图片chip.pngchip_kernel.pngcolour.pngcolour_kernel.pngfrog.png尺寸109x557x7668x45599x99500x375 testsets/real_imgs/x4_dpsr 图片chip.pngchip_x2.pngchip_x3.pngchip_x4.png尺寸109x55218x110327x165436x220 testsets/Set5/GT 图片：…
阅读更多...
说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

一、背景 在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉，我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同…
阅读更多...
15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR

15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR

文章目录 1. DPI 和 PPI 是什么？一、物理像素和css像素三、设备像素比DPR四、viewport五、viewport三理论：布局视口、视觉视口、理想视口五、利用meta标签对viewport进行控制 1. DPI 和 PPI 是什么？ DPI ---- 最初用于衡量打印物上每英寸的点…
阅读更多...
【CSS】聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

【CSS】聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

前言 大家好，我是HoMeTown，顺着计量单位，想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。 众所周知，在CSS中我们通常是使用px作为单位的场景多一点，在PC端，1个像素恰好对应电脑屏幕…
阅读更多...
移动web开发之像素和DPR详解

移动web开发之像素和DPR详解

前话： 　　像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的…
阅读更多...
DPR

DPR

Dense Passage Retrieval for Open-Domain Question Answering https://github.com/facebookresearch/DPR摘要 开放域问题回答依赖于有效的段落检索来选择候选上下文，其中传统的稀疏向量空间模型，如TF-IDF或BM25，是事实上的方法。作者表明检…
阅读更多...
如何理解dpr

如何理解dpr

首先如何在设备上实现1px边框： 物理像素: 在视网膜屏下面, 显示的实际的像素颗粒，iphone6分辨率7501334px 逻辑像素: 可以认为成就是设备的宽度,css设置的像素，iphone6逻辑像素7501334px dpr 物理像素(设备像素) /逻辑像素(设备独立像素) 所…
阅读更多...
基于C99标准的C语言coding技巧

基于C99标准的C语言coding技巧

文章目录 Union宏定义数组和柔性数组其它 Union 共用体中有int型和char[10]这两个成员&#xff0c;代码如下&#xff1a; #include <stdio.h> union st { int x; char c[10]; }s;int main(void) { s.x50; s.c"abcdef"; printf("%s",s.c); return 0…
阅读更多...
推荐文章

Copyright @ 2022~2023