# 设备像素、逻辑像素、CSS 像素、viewport
# 设备像素（物理像素）
设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位 pt。
# 原始和逻辑像素
因为多数电脑屏幕的分辨率可以通过电脑的操作系统来调节，屏幕像素的分辨率可能不是一个绝对的衡量标准。
现代液晶屏幕按设计有一个原始分辨率，它代表像素和三元素组之间的完美匹配。（阴极射线管也是用红－绿－蓝荧光三元素组，但是它们和影像像素并不重合，因此和像素无法比较）。
对于该显示器，原始分辨率能够产生最精细的影像。但是因为用户可以调整分辨率，显示器必须能够显示其它分辨率。非原始分辨率必须通过在液晶屏幕上拟合重新取样来实现，要使用插值算法。这经常会使屏幕看起来破碎或模糊。例如，原始分辨率为 1280×1024 的显示器在分辨率为 1280×1024 时看起来最好，也可以通过用几个物理三元素组来表示一个像素以显示 800×600，但可能无法完全显示 1600×1200 的分辨率，因为物理三元素组不够。
# DIP/DP 设备独立像素
设备独立像素（又称设备无关像素 Device Independent Pixels 、密度独立性 Density Independent 或设备独立像素，简称 DIP 或 DP）是一种物理测量单位，基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素的应用。
典型的用途是允许移动设备软件将信息显示和用户交互扩展到不同的屏幕尺寸。允许应用程序以抽象像素为单位进行测量，而底层图形系统将应用程序的抽象像素测量值转换为适合于特定设备的物理像素。
(css)px = dp * (dpi / 160) 设备兼容性 (opens new window)
# CSS 像素
CSS 像素：在 CSS 中以 px 为后缀，是一个长度单位，大致相当于一个肉眼可以轻松看到的小点的长宽，否则就是尽可能小的长度。根据定义，一个 CSS 像素应当看起来是在距离观察者一臂之遥且像素密度为 96 DPI 的屏幕中的一个物理像素。
当然，这一定义，由于一些术语“轻松看到”和“一臂之遥”不精确且因人而异，导致其留下很多解释空间。比如，当一个用户坐在台式机前，屏幕和用户眼睛之间的距离实际上要比手机屏幕和眼睛的距离远。
因此实际应用中，当使用单位 px 时，让 96px 的距离等同屏幕上的大约 1 英寸就合格了，无论屏幕的实际像素密度是多少。换句话说，如果一个手机屏幕的像素密度是 266 DPI，且屏幕上一个元素的宽度是 96px，那么这个元素的实际宽度会是 266 设备像素（ device pixels ）。
# Window.devicePixelRatio / dpr
Window 接口的 devicePixelRatio 返回当前显示「设备的物理像素分辨率」与 「CSS 像素分辨率」之比。 此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。 简单来说，它告诉浏览器应该使用多少屏幕实际像素来绘制单个 CSS 像素。
当处理标准显示器与 HiDPI 或 Retina 显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。
您可以使用 window.matchMedia() 检查 devicePixelRatio 的值是否发生更改（例如，如果用户将窗口拖动到带有不同的像素密度的显示器上）。
value = window.devicePixelRatio;
MDN Window.devicePixelRatio (opens new window) > 设备像素比 devicePixelRatio 简单介绍 (opens new window)
# viewport
← 像素与分辨率 Markdown语法简要 →