前端基础-屏幕尺寸、样式单位

前端知识点很多，才入门的萌新可能不知道从哪里学起。今天我们来看看几个最基础的概念：屏幕尺寸、样式单位。

1.物理像素 — DP（device pixels）

显示屏的成像原理：通过一系列的小点排列成一个大的矩形，不同的小点通过显示不同的颜色来显示成图像。

单位pt，属于真正的绝对单位。

2.逻辑像素

• PX（CSS pixel）CSS像素单位是px
• DIP(Device independent Pixel) 设备独立像素，也称为逻辑像素

CSS像素 = 独立像素 = 逻辑像素

浏览器里的一切长度都是以 px（CSS像素）为单位。

3.DPR(devicePixelRatio)

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，物理像素和逻辑像素的比值

DPR = 物理像素 / 逻辑像素(某一方向上)

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它就是Dpr

例如iphoneX 的 devicePixelRatio = 3

而前几代 iphone 6/7/8 采用的同样的屏幕，devicePixelRatio = 2

4.PPI（pixels per inch）

每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。

$$PPI=\frac{\sqrt{横向像素{数}^2+竖向像素{数}^2}}{屏幕对角线尺寸（英寸）}$$

高PPI的设备中，一个CSS像素通常等于两个甚至三个物理像素。

PPI通常是判断移动设备屏幕是否高清的重要参数。