devicePixelRatio 和 dppx 有什么不同？
what is different between devicePixelRatio and dppx?
我对 devicePixelRatio 和 dppx 做了一些研究：
deicePixelRatio：returns当前显示设备上一个物理像素的（垂直）尺寸与一个CSS像素的尺寸之比。
dppx：每‘px’单位的点数。
我认为它们只是一回事，但我不确定，对吗？
在 Web 开发领域，设备像素比（也称为 CSS 像素比，也称为 dppx）决定 CSS 如何解释设备的屏幕分辨率.
CSS 通过公式解释设备的分辨率：device_resolution/css_pixel_ratio。例如：
三星 Galaxy S III
实际分辨率：720 x 1280
CSS像素比：2
解析分辨率：(720/2) x (1280/2) = 360 x 640
查看网页时，CSS 会认为设备有一个 360x640 分辨率的屏幕，媒体查询会像屏幕是 360x640 一样响应。但是屏幕上的渲染元素将是实际 360x640 屏幕的两倍。
其他一些示例：
三星 Galaxy S4
实际分辨率：1080 x 1920
CSS像素比：3
解析分辨率：(1080/3) x (1920/3) = 360 x 640
iPhone 5s
实际分辨率：640 x 1136
CSS像素比：2
解析分辨率：(640/2) x (1136/2) = 320 x 568
之所以创建 CSS 像素比，是因为随着手机屏幕的分辨率越来越高，如果每个设备的 CSS 像素比仍然为 1，那么网页会呈现得太小而无法看到。典型的全屏桌面显示器是 1920x1080 的 24" 显示器。想象一下，如果该显示器缩小到 < 5" 但具有相同的分辨率。在屏幕上看东西是不可能的，因为它们太小了。
这里有一个工具可以告诉您当前设备的像素密度：
http://bjango.com/articles/min-device-pixel-ratio/
这是一个可搜索的设备像素比列表（如果您有要添加到此列表的设备，他们会通过 GitHub 接受拉取请求）
不，这不是一回事。 Qmaster 完美解释了设备与像素比的概念，因此无需添加任何其他内容。
屏幕（或打印机）的点密度是它可以显示的点（像素）数量（实际上相当于我们当前固定点数屏幕世界中的“有”）长度。 CSS 有两个单位来表示这个量级：
- dpi（每英寸点数）
- dppx（每像素点数）
创建 CSS 时，CRT 显示器统治了世界，它们的点密度通常在 96dpi 左右。其实pixel根据CSS3的定义是：
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).Link.
一个 dppx 是 96dpi 屏幕中的像素密度。数学表示：
1dppx = 96dpi
比如你的15寸笔记本的像素密度是146.9dpi，那就完全等同于它的像素密度是1.53dppx（1.53=146.9/96）。
devicePixelRatio和dppx完全一样。前者在Javascript中调用，后者在CSS.
中使用
浏览器从 OS 请求这个值。 OS 在其显示模式中定义此值。典型值为：@1x、@2x、@3x、@1.5x。
通过这个值，例如@2x，OS向应用程序（浏览器等）提示在当前显示模式下，一个逻辑像素等于两个物理像素（从技术上讲，它可能会或可能不会），因此，浏览器（引擎）将使用双维媒体来实现最高质量。这是由浏览器引擎完成的，而不是由我们完成的。
我对 devicePixelRatio 和 dppx 做了一些研究：
deicePixelRatio：returns当前显示设备上一个物理像素的（垂直）尺寸与一个CSS像素的尺寸之比。
dppx：每‘px’单位的点数。
我认为它们只是一回事，但我不确定，对吗？
在 Web 开发领域，设备像素比（也称为 CSS 像素比，也称为 dppx）决定 CSS 如何解释设备的屏幕分辨率.
CSS 通过公式解释设备的分辨率：device_resolution/css_pixel_ratio。例如：
三星 Galaxy S III
实际分辨率：720 x 1280 CSS像素比：2 解析分辨率：(720/2) x (1280/2) = 360 x 640
查看网页时，CSS 会认为设备有一个 360x640 分辨率的屏幕，媒体查询会像屏幕是 360x640 一样响应。但是屏幕上的渲染元素将是实际 360x640 屏幕的两倍。
其他一些示例：
三星 Galaxy S4
实际分辨率：1080 x 1920 CSS像素比：3 解析分辨率：(1080/3) x (1920/3) = 360 x 640
iPhone 5s
实际分辨率：640 x 1136 CSS像素比：2 解析分辨率：(640/2) x (1136/2) = 320 x 568
之所以创建 CSS 像素比，是因为随着手机屏幕的分辨率越来越高，如果每个设备的 CSS 像素比仍然为 1，那么网页会呈现得太小而无法看到。典型的全屏桌面显示器是 1920x1080 的 24" 显示器。想象一下，如果该显示器缩小到 < 5" 但具有相同的分辨率。在屏幕上看东西是不可能的，因为它们太小了。
这里有一个工具可以告诉您当前设备的像素密度：
http://bjango.com/articles/min-device-pixel-ratio/
这是一个可搜索的设备像素比列表（如果您有要添加到此列表的设备，他们会通过 GitHub 接受拉取请求）
不，这不是一回事。 Qmaster 完美解释了设备与像素比的概念，因此无需添加任何其他内容。
屏幕（或打印机）的点密度是它可以显示的点（像素）数量（实际上相当于我们当前固定点数屏幕世界中的“有”）长度。 CSS 有两个单位来表示这个量级：
- dpi（每英寸点数）
- dppx（每像素点数）
创建 CSS 时，CRT 显示器统治了世界，它们的点密度通常在 96dpi 左右。其实pixel根据CSS3的定义是：
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).Link.
一个 dppx 是 96dpi 屏幕中的像素密度。数学表示：
1dppx = 96dpi
比如你的15寸笔记本的像素密度是146.9dpi，那就完全等同于它的像素密度是1.53dppx（1.53=146.9/96）。
devicePixelRatio和dppx完全一样。前者在Javascript中调用，后者在CSS.
浏览器从 OS 请求这个值。 OS 在其显示模式中定义此值。典型值为：@1x、@2x、@3x、@1.5x。
通过这个值，例如@2x，OS向应用程序（浏览器等）提示在当前显示模式下，一个逻辑像素等于两个物理像素（从技术上讲，它可能会或可能不会），因此，浏览器（引擎）将使用双维媒体来实现最高质量。这是由浏览器引擎完成的，而不是由我们完成的。