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

article/2025/10/11 10:08:37

一、背景

在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/

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

相关文章

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…
阅读更多...
C语言的三套标准：C89、C99和C11

C语言的三套标准：C89、C99和C11

我们今天使用的 Windows、Linux、Mac OS 等操作系统都是由一种叫做 Unix 的系统演化而来。Unix 作为80年代主流的操作系统&#xff0c;是整个软件工业的基础&#xff0c;是现代操作系统的开山鼻祖&#xff0c;C语言就是为 Unix 而生的。 Unix 和C语言的开发者是同一人&#xf…
阅读更多...
ANSI C、C89、C99和C51的区别

ANSI C、C89、C99和C51的区别

ANSI C、C89、C99和C51的区别 什么是ANSI C、ISO C、C89、C90标准&#xff1f; 随着C语言使用得越来越广泛&#xff0c;出现了许多新问题&#xff0c;人们日益强烈地要求对C语言进行标准化。1983年&#xff0c;美国国家标准协会&#xff08;ANSI&#xff09;组成了一个委员会…
阅读更多...
VS不支持C99标准变长数组的概念

VS不支持C99标准变长数组的概念

#《VS不支持C99标准变长数组的概念》 文章目录 1.visual studio2022**2.GCC 1.为什么会报错&#xff0c;而gcc编译器不会&#xff1f; *案例 2.vs和gcc的区别 3.总结 案例 1.在第一张图中我们可以看到inta[n]这个地方在报错而且提示表达式的计算结果不是常数&#xff0c;意思就…
阅读更多...
c89与c99区别

c89与c99区别

注&#xff1a; GCC支持C99, 通过 --stdc99 命令行参数开启&#xff0c;如&#xff1a; 　　 代码: gcc --stdc99 test.c -------------------------------------------------------------------------------------------------- 　　 　　1、增加restrict指针 　　C99中增加了…
阅读更多...
C89、C99和C11标准之间的差异

C89、C99和C11标准之间的差异

收集了大部分差异特性&#xff0c;不断完善和补充&#xff0c;有遗漏的地方欢迎留言补正。 一、C99针对C89的改变 1.增加了restrict指针 通过restrict修饰指针&#xff0c;可以确保两个指针不能指向同样的内存空间。 如memcpy函数在C99标准下的定义为 void *memcpy(void *rest…
阅读更多...
C语言标准——C89、C99、C11、C17、C2x ...

C语言标准——C89、C99、C11、C17、C2x ...

C的标准化过程 C语言自诞生到现在&#xff0c;期间经历了多次标准化过程&#xff0c;主要分成以下几个阶段&#xff1a; Traditional C 此时的 C 语言还没有标准化&#xff0c;来自“C Programming Language, First Edition, by Brian W. Kernighan, Dennis M. Ritchie. Pre…
阅读更多...
C89和C99标准有什么不同？

C89和C99标准有什么不同？

关注星标公众号&#xff0c;不错过精彩内容 编排 | strongerHuang 微信公众号 | 嵌入式专栏 C语言是一门经典的编程语言&#xff0c;经过这么多年&#xff0c;依然是一门很热的编程语言。 在TIOBE 编程语言排行榜中&#xff0c;这几年C语言基本排名第一、第二&#xff0c;可以说…
阅读更多...
C语言规范标准-C99(中文版) 完整版正式发布

C语言规范标准-C99(中文版) 完整版正式发布

一直有一个心愿&#xff0c;想翻译<C语言规范标准-C99>,以使更多采用C语言作为开发语言的中国开发者能用自己的母语去阅读这个重要的文档。 特别对于刚开始使用C语言进行开发工作的程序员&#xff0c;去阅读英文版本的原版会感到望而生畏&#xff0c;不自觉的就放弃了。但…
阅读更多...
faster-rcnn 之 RPN网络的结构解析以及RPN代码详解

faster-rcnn 之 RPN网络的结构解析以及RPN代码详解

【首先】&#xff1a;大家应该要了解卷积神经网络的连接方式&#xff0c;卷积核的维度&#xff0c;反向传播时是如何灵活的插入一层&#xff1b;这里我推荐一份资料&#xff0c;真是写的非常清晰&#xff0c;就是MatConvet的用户手册&#xff0c;这个框架底层借用的是caffe的算…
阅读更多...
RPN定位模块细节回顾

RPN定位模块细节回顾

一、主干网络与FPN多尺度特征提取 将一张高宽为H*W的图像输入深度网络&#xff0c;经过主干网络与FPN结构后输出不同级别的特定分辨率特征。 P2&#xff1a;torch.size(1&#xff0c;256&#xff0c;H/4&#xff0c; W/4) P3&#xff1a;torch.size(1&#xff0c;256&#…
阅读更多...
转：FRCNN之RPN结构详解

转：FRCNN之RPN结构详解

图没了&#xff0c;大家可以移步原文网址&#xff0c;之前放在最后的。。。 https://www.jianshu.com/p/ab1ebddf58b1 一、资源提供&#xff1a; 论文链接 Faster R-CNN Towards Real-Time Object&#xff1a;https://arxiv.org/pdf/1506.01497.pdf tensorflow源码链接&…
阅读更多...
MASK RCNN 之RPN

MASK RCNN 之RPN

一、RPN网络 1.1 网络结构 RPN结构图 1.2 Anchor锚框生成规则 基于上一步得到的特征图[P2,P3,P4,P5,P6],介绍下MASKRCNN网络中Anchor锚框的生成&#xff0c;根据源码中介绍的规则&#xff0c;与之前的Faster-RCNN中的生成规则有一点差别。 ①遍历P2到P6这五个特征层&#x…
阅读更多...
FasterRCNN_rpn

FasterRCNN_rpn

本文代码来自于https://github.com/bubbliiiing/faster-rcnn-pytorch,b站视频https://www.bilibili.com/video/BV1BK41157Vs?p1,本文仅作学习使用 FasterRCNN整体的网络构造 class FasterRCNN(nn.Module):def __init__(self, num_classes, mode "training",feat_…
阅读更多...
RPN网络讲解

RPN网络讲解

讲完了anchor机制&#xff0c;接下来我们讲RPN(region proposal network)区域候选网络&#xff0c;它的作用是为了得到候选框。 先看以下内容&#xff1a; faster rcnn结构及代码讲解 原理解释 Feature Map进入RPN后&#xff0c;先经过一次33的卷积&#xff0c;同样&#xff…
阅读更多...
推荐文章

Copyright @ 2022~2023