[JavaScript知识库]屏幕适配常见知识理解---1基础

物理像素(physical pixel)

即设备像素，一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。买手机时那些销售告诉你的分辨率就是这个。

（这个行业还有一个毛病，分辨率本事设备的横向和纵向的像素数量，也就是宽和高，比如坚果3的分辨率应该是：1080x2160像素，但是销售时为了好看，商家逗将大数字放在了前面，写成2160x1080像素，这样更吸引人嘛，久而久之，大家都习惯这么做了，真是无语了）

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，别名叫做点（是一个单位），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素（程序只用管理虚拟像素，虚拟像素到物理像素的映射不需要我们负责）。（一个点里面可以放多个像素，并且设备独立像素还可以被改变的，比如通过缩放，视口缩放和浏览器的缩放）

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

CSS像素

比如用于浏览器中的网页布局，CSS像素也是一种设备独立像素，也称为屏幕无关像素。

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

PPI(Pixels Per Inch,每英寸所拥有的像素数目)

分为横向和纵向

注：DPI原本是印刷上的记量单位，意思是每英寸上，所能印刷的网点数（Dot Per Inch）。随着数字设备快速发展，大多数的人也将数字影像的解析度用DPI表示，但印刷时计算的网点（Dot）和电脑显示器的显示像素（Pixel）并不相同，所以专业人士会用PPI(Pixel Per Inch)表示数字影像的解析度，以区分二者。

视网膜屏幕

什么样的屏幕叫视网膜屏幕呢？

2K

我们经常看见的2K、4K、1080P、HD、蓝光等代表什么意思呢？