β

完全理解px,dpr,dpi,dip

黯羽轻扬 649 阅读
CSS

写在前面

从media query一路摸过来,花了大把时间才弄明白这些东西的含义

设备像素

设备像素(Device Pixels):设备屏幕的物理像素,单位是 px ,比如iPhone6的 750x1334px

P.S.表示屏幕上可以铺多少个点点,而不是一个绝对长度单位(例如 in , mm ),因为我的点点和你的点点大小不一样

分辨率

分辨率(Resolution)也是一个物理概念,含义要看对谁

对于屏幕,分辨率一般表示屏幕上显示的物理像素总和。比如,我们说iPhone6屏幕分辨率是 750x1334px

对于图像,概念等同于图像尺寸、图像大小、像素尺寸等等。比如,我们说 20x20px 的icon

P.S.其实严格来说,图像分辨率的单位是ppi(Pixels Per Inch),对于一个图片文件,其像素尺寸是一定的,可能含有来自相机的meta信息,比如分辨率 200ppi ,该值只是个建议值,图片显示出来我们看到的尺寸由屏幕像素密度决定,像素密度越高,图片看起来越小

CSS像素

CSS像素(CSS Pixels):是Web编程的概念,指的是CSS样式代码中使用的逻辑像素

所以,1个CSS像素在不同设备上可能对应不同的物理像素数,这个比值是设备的属性(Device Pixel Ratio,设备像素比)

在CSS规范中,长度单位可以分为绝对单位和相对单位。 px 是一个相对单位,相对的是设备像素(Device Pixels)。比如iPhone5使用的是Retina视网膜屏幕,用 2x2 的Device Pixel代表 1x1 的CSS Pixel,所以设备像素数为 640x1136px ,而CSS逻辑像素数为 320x568px

设备像素比

设备像素比缩写为DPR或者DPPX,如下:

一般我们说DPR,wiki定义:

Device pixel ratio, the ratio between physical pixels and logical pixels used by cascading style sheets (CSS): other names for it are “CSS Pixel Ratio” and “dppx”

所以,设备像素比表示1个CSS像素(宽度)等于几个物理像素(宽度):

DPR = 物理像素数 / 逻辑像素数

比如 dpr=2 时,1个CSS像素由4个物理像素点组成,见上面对CSS像素的解释

P.S.DPR不是单位,而是一个属性名,比如在浏览器中通过 window.devicePixelRatio 获取屏幕的DPR

特别注意 :zxx的说法:

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是:window.devicePixelRatio = 物理像素 / dips

这里的“设备独立像素”,指的就是逻辑像素,即CSS像素,也是一个属性名,不要和Android的单位 dip/dp 弄混了, 二者没有任何关系 ,虽然英文一样,含义也差不多,但那是Android自家的事情,不通用

像素密度

像素密度也叫显示密度或者屏幕密度,缩写为DPI(Dots Per Inch)或者PPI(Pixel Per Inch),含义相同

专业的一般说PPI,细微差异如下:

ppi和dpi(每英寸点数)。从技术角度说,“像素”(p)只存在于计算机显示领域,而“点”(d)只出现于打印或印刷领域。

经常看到相同尺寸的屏幕像素尺寸却不同,也就是DPI的差异,比如4.7英寸的iPhone6像素尺寸为 750x1334px ,而4.7英寸的HTC One像素尺寸为 1080x1920px

像素密度很容易算出来,比如iPhone6的:

// 屏幕对角线的像素尺寸 / 物理尺寸(inch)
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi

生活案例:

Windows设置分辨率修改的应该就是像素密度,所以同一张图片在不同分辨率设备上的显示尺寸不同,像素越高,图片显示尺寸越小(用尺子量屏幕),比如Windows 1920x1080 分辨率下桌面图标/字体都比 1366x768 下要小些。而图片浏览工具能放大一张图片,实际上是通过软件插值模拟像素数据增加了宽高像素数量,所以放很大时会不清晰(失真),缩小也存在这样的问题

在输出的最后时刻:比如显示、或打 印、或冲印时的DPI设置,才是最后决定输出尺寸大小的关键设置,机身形成文件所标示的什么 180DPI 72DPI 都只是一种设定好的临时参数。所以洗照片可以有寸照、2寸照等等

相机中EXIF显示的DPI或者photoshop中显示的DPI只是相机随便假设你的最终输出的对象的一个数据,因为相机和PS都不知道你最终用的打印机是什么DPI,也不知道你是不是就是为了放在网络上,所以就随便假设了一个数,其实没有任何的意义

设备独立像素

一般指Google提出的用来适配Android海量奇怪屏幕的,Windows也有这个概念,但含义不同,IOS好像没有设备独立像素一说

设备独立像素作为 单位 ,一般是指Android开发中的东西,缩写为DIP(Device Independent Pixels)或者DP(Density-independent Pixels),含义完全一致

Android设备的特点是屏幕尺寸很多,因此为了显示能尽量和设备无关,提出了dip,参照的density是160。计算公式为:

// 当屏幕密度为160(单位是ppi或者dpi,一个意思)时,px === dip
px = dip * density / 160 
// 所以
dip = px * 160 / dpi

当然,则两个式子都只适用于Android设备,这个 dip 拿到其它地方去没什么意义

视口(viewport)

桌面上视口宽度等于浏览器宽度,但在手机上有所不同。

所以,在没有缩放的情况下,屏幕的CSS像素宽度其实是指理想视口的宽度,而 meta 标签:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

指定了布局视口=理想视口,并且禁止缩放。所以添上 width=device-width 的viewport meta后页面变大了(一开始页面内容小得看不清),实际上是布局视口变小了

参考资料

CSS
作者:黯羽轻扬
原文地址:完全理解px,dpr,dpi,dip, 感谢原作者分享。