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

article/2025/10/11 9:58:56

前言

大家好，我是HoMeTown，顺着计量单位，想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。

众所周知，在CSS中我们通常是使用px作为单位的场景多一点，在PC端，1个像素恰好对应电脑屏幕上的1个物理像素点，正因如此，会给刚开始了解CSS的同学一个错觉就是：css中的像素就是设备的物理像素。

其实不然，css中的像素只是一个抽象的单位，在不同的设备与环境中，css中的1px所代表的设备物理像素是不同的，以移动端为🌰，在做移动端开发时，就会出现1px的问题，在不同机型的移动设备上，显示的效果却又很大的差异。这就涉及到设备像素、css像素、设备独立像素、dpr、ppi的概念。

css像素

css像素就是我们在进行开发时，经常使用的px单位。px本身从主观的意义来讲，其实应该是一个绝对单位，但是从客观的角度出发，在不同的机型下，他又相对于设备像素，主要体现在两个方面：

  • 调整屏幕分辨率
  • 两个不同型号的手机

在页面进行缩放的操作，其实也会引起css中px的变化，举个🌰：

有一个元素320px，正好填满整个屏幕，把页面放大1倍后，原本1px的元素变成2px，在实际宽度不变的情况下，1px变得跟原来的2px一样了，之前需要320px才能填满，现在只需要160px，此时元素会占据更多的设备像素。

由此可见，px会受到dpr（设备像素比）与ppi（每英寸像素比）的影响。

设备像素（device pixels）

设备像素也就是物理像素，即设备控制显示的最新物理单位，不一定是一个1x1 或者 2x2的小正方块，它其实不存在具体的标准宽高，只是用于显示完整色彩的一个抽象“点”，可以参考公园里景观里的变色灯带，一个彩灯由红、蓝、绿三个小灯组成，混成各种颜色。
在这里插入图片描述

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

设备独立像素（Device Independent Pixel）

设备独立像素与就是，与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总的概念，包括了css像素。

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

举个简单的🌰：
我有一台辣鸡笔记本，我想玩给他爱，然后电脑的分辨率为2560x1600，可能我觉得这个分辨率对我来说不太舒服，我再 设置–影响–图形–分辨率 中把它调到1440x900。

这里的分辨率其实不严谨的讲，就指的是设备独立像素，一个设备独立像素里可能会包含1个或者多个物理像素点，包含的越多，画质越高。

为什么会出现设备独立像素这种虚拟像素单位概念呢？举个🌰：

假设，我有一个iPhone12 和 iPhone13，尺寸都是5.4，iphone12的分辨率是1040*960， iphone13的分辨率是2080×1170，那么，ihpone12有1170个物理像素，iphone有2532个物理像素。

如果按照真实物理像素进行布局，以12为例，那么到13上，又会出现一半的空白，为了避免这种情况的出现，出现了虚拟像素单位，我们统一12和13的虚拟像素都是1040个，只是在12上，1个虚拟像素被换算成1个物理像素，在13上，1个虚拟像素，被换算成2个物理像素。

这种n个虚拟像素:n个物理像素比例式的换算，被统称为设备像素比，也就是dpr

dpr（Device pixel ratio）

设备像素比，代表设备独立像素到设备像素的转换关系。

在JavaScript中可以通过window.devicePixelRatio获取。

计算公式为：

drp = dp / dip
if(drp === 1:1) use 1dp show 1px
if(drp === 2:1) use 4dp show 1px
if(drp === 3:1) use 9dp show 1px

如下图：

在这里插入图片描述

ppi（pixel per inch）

每英寸像素，即每英寸所包含的像素点数目，也就是像素密度，数值越高，屏幕越能以更高的密度显示图像。

计算公式为：
在这里插入图片描述

总结

  1. 无缩放情况下，1px = 1dip
  2. 设备像素不会改变，但是设备虚拟像素会变
  3. 在移动端的标准屏下，1dip = 1dp
  4. dpr = dp / dip
  5. ppi越大，图像越清晰

往期回顾

  • 手把手带你打造绝美个人博客网站🔥【含部署教程+免费SSL证书配置】！

  • 【 TS技巧干货 🔥】开发完一个生产标准的TS项目之后，我总结出了这些技巧…

  • 【性能】7分钟带你了解【尤大】都在使用的 Chrome Runtime Performance Debug！

  • 【源码角度】7分钟带你搞懂ESLint核心原理！

  • 【JavaScript】手把手教你写高质量 JavaScript 异步代码！

  • 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

  • 【npm】package-lock.json冲突及问题排查思路！

  • 【JavaScript】关于解决JS 计算精度问题（toFixed, Math.round, 运算表达式） ！

  • 【Vite】Vite设置好了Proxy，但接口却404！解决方案来了！

  • 【TypeScript】超详细的笔记式教程！进阶！！【下】

  • 【TypeScript】超详细的笔记式教程！进阶！！【中】

  • 【TypeScript】超详细的笔记式教程！进阶！！【上】

  • … 查看更多 …


http://chatgpt.dhexx.cn/article/8F2oiVxp.shtml

相关文章

移动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…
阅读更多...
RPN架构及其PyTorch实现

RPN架构及其PyTorch实现

RPN&#xff08;Region Proposal Network&#xff09; 引言RPN架构RPNAnchor 生成Proposals 的选择loss 的计算FPN for RPNRPN网络对于正负样本的选择 FPN for Fast R-CNN RPN架构及其Pytorch实现基于RPN产生~20k个候选框~20k个候选框(1)&#xff1a;RPN~20k个候选框(2)&#x…
阅读更多...
RPN 模型简要介绍

RPN 模型简要介绍

概述 本文介绍了 Faster R-CNN 目标检测模型中提出的图像候选框提取模型—— RPN 模型&#xff0c;这是一种区域生成网络&#xff0c;结构简单嵌入方便&#xff0c;极大加快了目标检测模型的运行速度&#xff0c;使目标检测模型真正融合到同一个神经网络内&#xff0c;对之后影…
阅读更多...
推荐文章

Copyright @ 2022~2023