什么是物理像素与逻辑像素？

2024-06-25 02:30:47

如果理解物理像素与逻辑像素的关系？

物理像素

指的是设备的实际像素，这个主要由设备自身的硬件所决定，因此同一类型的设备物理像素是固定的。

逻辑像素（DPI）

逻辑像素是相对于物理像素之后提出的一个概念，也被称为设备独立像素（Device Independent Pixel）

我们在css中设置的1px就等于一个设备独立像素

设备像素比（Device Pixel Ratio，DPR）

1,DPR = 物理像素 / 逻辑像素；

2,例如DPR = 2,也就相当于一个逻辑像素实际上由四个物理像素组成；

3,以iPhone6手机为例，iPhone6的物理像素为1334 x 750 像素，而逻辑像素只有667 x 375 像素；

4,DPR值，厂商在设备出厂时就已经进行设置，并且禁止用户进行更改。

逻辑像素出现的原因

1，随着科技的发展，设备所能达到的物理像素只会不断提高

2，就以iPhone12为例,它的物理像素可以达到2532 x 1170 像素，这相较于一般电脑也毫不逊色

3，但这并不代表它就可以按照实际的物理像素来设置css尺寸，原因主要为以下两点：

人机尺寸的限制

1.手机只能这么大

手机作为移动设备，有属于它自己的设计定位，

这也决定着它必须依据人手的尺寸进行人机工程设计

这就决定了它的实际设备尺寸上限

2.内容的显示不能特别小

人所能接受的最小字体尺寸是一定的

以DPR= 2的手机为例，如果厂商不进行dpr的设置，同样将css的字体大下设置为12px

在手机上显示的字体其实只有12px的四分之一大小，这对使用者来说无疑是一种折磨。

什么是物理像素与逻辑像素？相关推荐

8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...
# 提问物理像素.逻辑像素.CSS像素.PPI.设备像素比是什么? # 回答物理像素代表屏幕上有多少个点,比如1080x2340表示屏幕一排包含1080个物理像素点. 逻辑像素表示屏幕展示物体的视 ...
CSS中的px与物理像素、逻辑像素、1px边框问题
一直不太清楚CSS中的1px与逻辑像素.物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出& ...
掌握web开发基础系列--物理像素、逻辑像素、css像素
思考一下什么是物理像素?什么是css像素? 在 <掌握web开发基础系列--长度单位> 这篇文章中已经介绍过了css像素单位--px,这篇文章详细探讨一下设备物理像素和css像素之间的关 ...
物理像素，逻辑像素(pt)，css像素(px)，像素比(dpr)都是什么？px，em，rem等都是什么？有什么区别？
逻辑像素.物理像素.css像素.像素密度.像素比都是什么? (像素)分辨率:手机屏幕的实际像素尺寸. 像素密度(ppi -- 像素每英寸 (ps: dpi -- 点每英寸,一般针对于打印机等)):( ...
物理像素、逻辑像素、DPR理解，及移动端border 1px问题
像素: [像素 pixel]是图像显示的基本单位,表示"图像元素". ppi: [ppi]是屏幕上每英寸可以显示的像素(点)的数量,即屏幕像素密度. 像素的分类: 1.设备像素(物 ...
关于物理像素／逻辑像素
简单说明一下上图其实没啥关系: 描述屏幕尺寸,通常从物理和逻辑两方面来,而DPI(dot per inch) 这个密度单位可以说是连接了物理和逻辑,表示每英寸的点数: 这个dot点,是个抽象的概念, ...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因. 1.PX(CSS pixels) 1.1 ...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport（转载）
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
以 iPhone XS 为例,当写 CSS 代码时,针对于单位 px,其宽度为 414px & 896px,也就是说当赋予一个 DIV元素宽度为 414px,这个 DIV 就会填满手机的宽度: ...

最新文章

热门文章