CSS长度单位分析

桌面端

默认情况

css 1px == 屏幕 1px

但是如果当前屏幕进行了放大，显示设置》缩放设为 125%

则 window.devicePixelRatio = 1.25

如果屏幕是 1920x1080 分辨率

在默认100%缩放情况下，css 1920px 长度的元素正好占满宽度

但是在 125%缩放情况下，css 1536px 就可以占满屏幕了（1920/1.25=1536）

对于100%缩放的屏幕，1px--1/96inch

即，96px == 1inch

如果调整了缩放，那也会发生变化，

缩放 125%， 96px == 1.25 inch

对于我的手机，宽度 1080

查询到 window.devicePixelRatio = 2.7

1080/2.7 = 400，即对于我手机上的网页，400px就是整个宽度

devicePixelRatio也是不同渲染端自己定的

就比如我的微信扫码后的内置浏览器 devicePixelRatio = 2.7

手机的Edge和小米浏览器 devicePixelRatio = 2.625

reference pixel：用户与屏幕一臂距离，观看96dpi像素密度时，一个像素的角度，对于通常情况是 0.023度

比如：电脑显示器的使用距离比手机要远一些，所以设置相同css px大小的元素，在其对应的使用场景时，视觉效果应该是一致的。

在电脑屏幕和手机屏幕，渲染相同css px尺寸的元素，

把手机放到电脑屏幕旁边对比，手机上的对应元素会小一些，但是手机近一些，所以与电脑视觉效果一致。

！！后续可以考虑分析一下 chromium的源码，看看它是如何根据屏幕尺寸、分辨路、使用距离等因素来进行px定义的。