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

目录

物理分辨率和分辨率

什么是物理像素

什么是CSS像素

什么是设备像素比

什么是标清屏和高清屏

缩放

什么是PPI(DPI)


 

物理分辨率和分辨率

首先得知道物理分辨率分辨率是2个概念,可别混淆。

物理分辨率(标准分辨率):显示屏的最佳分辨率,即屏幕实际存在的像素行数乘以列数的数学表达方式,是显示屏固有的参数,不能调节,其含义是指显示屏最高可显示的像素数

我的显示屏的物理分辨率(显示屏最高可显示的像素数)就是1920×1080,但是分辨率是1600×900

物理分辨率即LED液晶板的实际分辨率,在LED液晶板上通过网格来划分液晶体,一个液晶体为一个像素点(物理像素)。

分辨率是可以改变的。分辨率为1600×900 时,就是指在LED液晶板的横向上划分了1600个物理像素点,竖向上划分了900个物理像素点。如果你换成1920×1080,那么LED液晶板就会横纵向重新划分物理像素点。 物理分辨率越高,则可接收分辨率的范围越大,则显示屏的适应范围越广。通常用物理分辨率来评价LED显示屏的档次。

我们把一个个像素点当成小格子,那么下图的分辨率就是2 * 4的分辨率,代表横向2个像素点,纵向有4个像素点

我们经常所说的分辨率1024*768就是横向有1024个像素点,纵向有768个像素点,再细化一点就是输出图像的每一条水平线上包含1024个物理像素点,一共有768条水平线

很明显,显示相同尺寸的屏幕,肯定是点越多,显示的越精细,效果越好。

那图中这些像素点是什么呢?其实就是物理像素

 

什么是物理像素

物理像素(physical pixel)又可以称为设备像素(dp : device pixel)

我们来感受一下这些物理像素点,像一个个小格子,一个个小点,看得很清楚

再细看每个小点,每一个小像素点都是由三原色RGB组成,显示器再控制明暗程度就可以显示想要的效果图案,从定义上来看,像素是指三原色及其灰度的基本编码。

实际的开发是以物理像素为准的吗?

这两个手机的宽和高都是一样的,很显然高清屏分辨率4 * 8比标清屏的2 * 4要清晰一些

假如实际开发的像素以物理像素为准,我们要显示1个像素的东西,结果如下

你看到的内容是不一样大的,很显然实际开发不是用物理像素描述的,物理像素只是为了描述设备分辨率需要知道的。实际开发其实是用CSS像素描述的。

不管是PC端还是移动端,都可以用screen.width/height来描述来描述水平和垂直方向的物理像素,即分辨率的水平和垂直方向上的数值。注意:这里分辨率不是物理分辨率。

 

什么是CSS像素

CSS像素可称为来逻辑像素(logical pixel),也可以称为设备独立像素(dip : device independent pixel)

写css的时候,其实用到的就是css像素

比如

.box {
    width:200px;
    height:200px;
}

这里的px就是说的CSS像素,不是物理像素。那么CSS像素和物理像素是什么关系呢?来看下图

左边表示标清屏幕,右边表示视网膜高清屏幕

宽和高都是2个CSS像素,那么在标清屏中需要用2 * 2个物理像素来显示,即1个CSS像素用1 * 1个物理像素来描述

在高清屏需要4 * 4个物理像素来显示,即1个CSS像素用2 * 2个物理像素来描述

高清屏就是显示每个CSS像素的物理点变多了,更精细了,看起来就更清晰了。

再来看看最初的例子

用CSS像素就可以解释上面的例子,手机实际宽和高一样,左边标清屏1个CSS像素代表1个物理像素,右边高清屏1个CSS像素代表4个物理像素。

 

什么是设备像素比

设备像素比(dpr : device pixel ratio)

dpr = 同一方向上的 物理像素 / CSS像素 (缩放比是1的情况)

同一方向就是指的横向比或者纵向比,后面讲缩放的时候再说为什么计算dpr要求缩放比是1。

还是这张图,来讲解一下dpr

我们以一个方向为例,比如横向

标清屏:dpr = 2 / 2 = 1

高清屏:dpr = 4 / 2 = 2

dpr = 2表示1个css像素用2 * 2个设备像素来绘制

console.log(window.devicePixelRatio);可以打印dpr

 

什么是标清屏和高清屏

dpr为1的就是标清屏,dpr > 1的就是高清屏,如下图示例

dpr越大,1 CSS像素表示的物理像素点越多,显示的越精细越清晰,所以会称为高清

 

 

缩放

我们看手机经常会用手指去放大图片,看完缩小图片,缩放的是什么?是CSS像素,不是物理像素

物理像素是和分辨率的划分有关的,不可能通过编码来改变的

比如我们要放大,如下面2张图的示例

放大之后一个CSS像素与多个设备像素重叠

 

又比如我们要缩小,如下面2张图的示例

缩小之后一个设备像素现在重叠了几个CSS像素

缩放之后,缩放比就不为1了,所以就不能这样计算dpr了,刚刚定义dpr的时候说过了,那是缩放比必须是1才成立的定义。

 

什么是PPI(DPI)

PPI (pixels per inch)就是每英寸的物理像素点,PPI 也可以称为 DPI (dots per inch)

每英寸物理像素点越多,密度越大,显示的越精细,类似分辨率,也是来描述像素密度和显示效果的

计算,利用勾股定理先算斜边的物理像素,再除以实际尺寸6.06英寸就能算出每英寸的物理像素点PPI 了

 

关注、留言,我们一起学习。

 

===============Talk is cheap, show me the code================

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页