CSS像素可称为来逻辑像素(logical pixel)，也可以称为设备独立像素(dip : device independent pixel)
写css的时候，其实用到的就是css像素
.box { width:2px; height:2px; }
左边表示标清屏幕，右边表示视网膜高清屏幕
宽和高都是2个CSS像素，那么在标清屏中需要用2 * 2个物理像素来显示，即1个CSS像素用1 * 1个物理像素来描述
在高清屏需要4 * 4个物理像素来显示，即1个CSS像素用2 * 2个物理像素来描述
高清屏就是显示每个CSS像素的物理点变多了，更精细了，看起来就更清晰了。
1、那么我们写一条线的高度为1px的时候，在1倍屏幕是一个物理像素高度，在2倍屏，使用的是2个物理像素高度
那么我们写0.5px是不是就可以在2倍屏幕显示1物理像素的高度。
2、我们在真机（3倍屏） window.deviceRatio=3 上面设置两个元素的边框
第一个元素.first{ border:1 px solid red; }
第二个元素 .second{ border: 0.35px solid red; } 看下对比，元素2的边框明显比元素1的边框细，可以理解为，元素2边框渲染时，使用了1物理像素，因为是3倍屏，0.35个逻辑像素px，大约等于1物理像素
3 查看手机的分辨率 如 2340* 1080 ，设备像素比3，则逻辑像素宽为1080/3=360px
4、当然deviceRatio可以是小数，比如2.5，某些安卓设备的设备像素比是2.5
