像素的相关问题

像素的相关问题

物理像素

整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素(physical pixel)

如果再放大一些，观察具体的一个像素点

分辨率

每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细

所以，我们都喜欢买像素高的手机

1px=1物理像素

屏幕在显示信息时，是否1px就是一个物理像素点呢？

早期的手机屏幕，都是所谓的普通屏幕，也就是标清屏，1css像素=1个物理像素

但是随着 Retina(视网膜屏)等技术的兴起，能够将更多的物理像素点压缩至一块屏幕中，从而达到跟高的分辨率，提升屏幕显示的细腻度

现在的手机大多都采用Retina技术或者更高的显示技术

手机A 分辨率：4*2（横向上两个像素点，纵向上4个像素点）

手机B 分辨率：8*4 （横向上4个像素点，纵向上8个像素点）

有1个 宽 1px，高 1px 的元素要显示在屏幕上

如果使用物理像素表示 1px，结果就是手机B上显示的要比手机A上小

逻辑像素

逻辑像素（logical pixel）也叫

• CSS 像素
• 设备独立像素

实际开发中使用的像素

.box{
    width: 2px;  /* 逻辑像素 */
    height: 2px; /* 逻辑像素 */
}

下面是上面盒子在不同屏幕上实际的显示效果

总结：

• 在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 2*2 个物理象时表示

• 在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用4*4个物理像素表示

• 整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍

• 如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）

• css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与

  

设备像素比

dpr：device pixel ratio

dpr=设备像素/css像素(缩放比是1的情况，参考1.6缩放一节，就明白为什么加这个限制了)

上面指的是同一方向上，也就是谈到设备像素比时，只考虑1个方向

还是这张图片

左边的 dpr=1，右边的dpr=2

所以,dpr=2，就是1个css像素用 2x2个设备像素(物理像素)来绘制

iphone 6 的 dpr就是2，iphone6+ 的 dpr=3

ppi

pixels per inch，表示每英寸的物理像素点，这考验一个屏幕厂商的设计和生产能力

ppi，也称作 dpi(dots per inch)

如小米11的 ppi 为 515

屏幕上的像素点也是多，也是密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数

PPI 的计算方法

以小米11为例，计算一下

$$\frac{\sqrt{1440^2+3200^2}}{6.81}=515ppi$$

二倍图

对于一张50x50的图片在标清屏下打开，1css像素=1个物理像素

如果在 Retina 屏幕中打开，在单一方向上，1css像素=2个物理像素，这样会造成图片模糊

解决方案就是使用倍图提高图片质量，解决在高清设备中存在的模糊问题

核心思路

• 比如希望在手机屏幕中显示一张100x100的图片
• 先制作一张200x200 的图片
• 通过css设置其逻辑尺寸为100x100
• 高清屏下手机浏览器会放大2倍显示，正好是200x200，正好是图片本身尺寸
• 注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都爆露出来，造成模糊效果

还有3倍图，4倍图等

身尺寸

• 注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都爆露出来，造成模糊效果

还有3倍图，4倍图等