设备像素比(devicePixelRatio)

前言

　　设备像素比(devicePixelRatio)：设备物理像素与设备独立像素的比值。可以通过window.devicePixelRadio来获取。

　　设备物理像素：设备能显示的最小单位。

　　设备独立像素：独立于设备的用于逻辑上衡量像素的单位。

　　如果设备总是以物理像素来显示内容，可能导致内容太小而看不清。浏览器就会对内容做一次放大后再渲染。这个放大比例就是设备像素比。

　　当我们进行浏览器缩放时，其实就是在改变浏览器的设备像素比。

PPI

在显示设备中，PPI(pixel per inch)单位英寸的像素数，代表屏幕的像素密度。

当PPI越高时在同一尺寸的屏幕上能显示更多的像素，也能够展现更多的画面细节。

 PPI的计算：屏幕的物理像素除以物理尺寸。

PPI过高的问题：相同的图片素材，在越高的设备上会显示得越小（PPI提高一倍，图片在设备中显示小了4倍）：

CSS像素

前端开发时，用来控制元素样式的单位像素，称为CSS像素。

浏览器默认情况下，CSS像素和屏幕像素1:1：

当页面放大时，CSS像素被拉伸，1个CSS像素大于1个屏幕像素：