px是最常用的CSS长度单位。1px到底多长？

CSS长度分为绝对长度和相对长度。 css单位

pixel（像素）是图像的基本采样单位。它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。 

不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点，也可以认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。 

       设备像素：设备的物理像素，其尺寸大小是绝对的

　　逻辑像素：CSS 的像素单位，其尺寸大小是相对的，也称为独立像素

　　分辨率：屏长的设备像素 × 屏宽的设备像素

　　dpi（dots per inch）：像素密度，表示水平或垂直方向每英寸长度的像素数目

　　ppi（pixels per inch）：像素密度，表示沿对角线每英寸长度的像素数目

       缩放因子（Scale Factor）：逻辑像素相对于设备像素的放大比例，可通过 window.devicePixelRatio 获得，但二者并不完         全等同

注意，我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。 

       分辨率（设备像素）=  设备尺寸 × 像素密度

　　例如：iphone6s 分辨率 为1920 * 1080。其对角线长度为5.5 inches，像素密度401 ppi，计算可得对角线的设备像素为5.5 *          401 = 2205.5

        逻辑像素 = 设备像素 × 缩放因子

　　例如：iphone6逻辑像素为375 * 667，分辨率为750 * 1334，缩放因子为2。1个逻辑像素 = 设备宽度的1/375；1个设备像素          = 设备宽度的1/750。所以：1/375 = 1/750 * 2

设备像素都是固定的，所以逻辑像素大小由缩放因子决定，那么缩放因子由什么决定？到底放多大才合适？

对于桌面设备，逻辑像素通常就等同于物理像素，本来是不用考虑缩放问题的。一切问题的根源就在于：屏幕变得越来越高清，ppi 越来越大。比如我现在用的 PC 是1920px的高清屏，如果没有缩放，所有的东西看起来都会比较小，因此需要放大。

所以决定缩放因子大小的，就是像素密度，密度越大、越高清的屏幕，需要的缩放比例就越大。

PC 上的缩放比例是自定义的。那么移动端的缩放比例是怎么确定的呢？答案是 ：viewport。

viewport 就是屏幕那块儿固定的可视区面积。默认情况下，移动端浏览器会将 viewport 宽度设为980px（也有可能是1024px 或其它值），也就是说