移动端-001-像素单位

像素

设备像素 device pixels

  • 物理像素,屏幕上一个点。
  • 这个点，实际是由RGB三原色排列组成。
  • 想想霓虹灯(物理像素)由红绿蓝小灯组成，三盏灯不同的亮度混合出各种彩色

设备独立像素(device independent pixels)

1
2
3
可以通过 api 查看 
window.screen.width
window.screen.height
  • iphone6 的 375x812指的是设备独立像素
  • chrome调试移动端不同手机型号的尺寸也是设备独立像素

概念

一个设备独立像素里可能包含1个或多个物理像素点，包含的越多看起来越清晰

参考普通屏的mac air 和 mac pro

  • 很明显 mac pro的看起来更清晰，因为 mac pro 一个设备独立像素包含的物理像素点更多

像素分辨率

以 iphone手机为例它的像素分辨率是 1125x2436 指的是横向能显示1125个物理像素点，纵向能显示2436个物理像素点。

现在的4K屏就是 4096x2160s

PPI(pix per inch)

每英寸的像素数。如5.8寸 iphone为例。

  • 手机屏幕对角线长度就是 英寸数
  • 分辨率为1125x2436
1
ppi = Math.sqrt(1125*1125 + 2436*2436) / 5.8 = 463ppi

CSS像素

1
2
3
4
div{width:100px;}
在页面 缩放比为1:1情况下， 1个CSS像素=1个设备独立像素。

假设当前屏幕分辨率是 1440，如果给元素设置宽度720px，则视觉上宽度是屏幕的一半。 这也解释了为什么分辨率跳高后感觉网页文字变小了。

devicePixelRatio

window.devicePixelRatio指的是设备物理像素和设备独立像素（device-independent pixels, dips）的比例。window.devicePixelRatio = 物理像素 / 设备独立像素（dips） 。经计算， iphonex的 devicePixelRatio 是3。

为啥普通电脑上的图片放到 mac pro 变模糊了？

  • 参考芯片的制程，分别有28nm、7nm、5nm。
  • 假设在1厘米x1厘米的空间很明显 5nm能放置更多的晶体管

高清屏实际就是1个设备独立像素能容纳更多的 物理像素

一张图 假设宽高100px 的图片普通电脑可能就是 100x100 = 10000个物理像素点

而在高清屏的时候 100px 的图片 可能是 400*400 = 160000 个物理像素点