一、设备像素
设备像素也被称作为物理像素。表示显示设备的真实像素,此像素是设备的固有属性,也就是说,从出厂的那一刻,设备像素点的大小和数目已经固定,不会再发生改变。
英寸是英式的长度单位,寸是中国的长度单位。1英寸 = 2.54 厘米、1寸 = 3.33333333 厘米、 1英寸 = 0.762 寸
1、分辨率
通常使用分辨率来描述设备像素,例如1920*1080,表示设备横向有1920像素点,纵向有1080个像素点。
2、屏幕尺寸
购买电视或者手机等设备的显示器都有一个屏幕尺寸参数,比如55英寸,它既不是显示器的宽度也不是高度,而是对角线的长度,如上图所示。
3、屏幕像素密度(PPI)
屏幕像素密度PPI(Pixel Per Inch,简称 PPI),单位是 dpi(Dot Per Inch)。
理论上,PPI越高越好,图像会更加细腻清晰。
以上图设备为例,计算该手机的PPI如下。
首先,算出对角线的尺寸:
然后,根据计算公式算出PPI:
PPI = 对角线的分辨率 / 对角线尺寸,即 PPI = 2203px / 5inch ≈ 440dpi,所以该手机的屏幕像素密度是440dpi。
二、设备独立像素
随着技术的进步,很小的屏幕能容纳很高的物理像素,比如 1920 * 1080以前只能应用于大的显示器,现在可能被容纳于一个小尺寸的移动端设备中。
iPhone 3和iPhone 4,屏幕尺寸一样,它们的设备独立像素都是320 * 480,但后者的屏幕像素密度是前者的两倍,iPhone 3物理像素是320 * 480,iPhone 4的物理像素是640 * 960。
如果使用设备像素作为单位,那么在视觉上看的话,iPhone 4上的div宽度是iPhone 3的一半,所以使用物理像素在web中设置尺寸是不合理的。
因此操作系统定义设备独立像素,用设备独立像素定义的尺寸,不管屏幕的参数如何,都能以合适的大小显示。
这就说明:
iPhone3用 1个 物理像素表示 1个 设备独立像素
iPhone4用 4个 物理像素表示 1个 设备独立像素
(注:横向2个物理像素表示1个设备独立像素,纵向2个物理像素表示一个设备独立像素)
而这一切都是由操作系统控制。
三、CSS像素
在web中所设置的像素都是CSS像素。
设备独立像素也是可以设置的,但是一般不去设置它。所以在没有缩放、同时设备独立像素未被设置的情况下,1个CSS像素等同于1个设备独立像素。
设备独立像素=CSS像素、未缩放
CSS像素在视觉上是很容易改变大小的,比如缩放浏览器页面,就是改变的CSS像素,当放大一倍,那么一个CSS像素在横向或者纵向上会覆盖两个设备独立像素。
例如:宽度100px的div,当页面放大一倍,它会在横向上由原本占据100个设备独立像素,变成占据200个设备独立像素;如果缩小,则恰好相反,只能占据50个设备独立像素。
设备像素(深蓝色背景)、CSS像素(半透明背景)
1、左图表示当用户进行缩小操作时,一个设备像素覆盖了多个CSS像素。
2、右图表示当用户进行放大操作时,一个CSS像素覆盖了多个设备像素。
无论CSS像素是缩小还是放大,它的像素数目是不变的。
比如100px,无论缩放,它依然是100px,只不过它占据的设备独立像素发生了变化(体积发生了变化,视觉大小上发生了变化而已)。
网友评论