从dpr谈起到移动端适配问题(一)

一、dpr

---

先看个公式：
devicePixelRatio （设备像素比 简写dpr）=physical pixels/ logical pixels(也就是device-independent pixel)
物理像素点：硬件上最小的显示点位，硬件不同最小点位就可能存在差异
设备独立像素点：系统设定的最小的显示点位，不可能小于物理像素点，这个单位的意义在于css样式中px 所对应的值，系统设是为了统一自己的设备显示的大小统一性，比方说ios 下所有iphone的设备独立像素点位大小相同。
设备像素比：上述两个的比值，js中可以通过window.devicePixelRatio 获得（chrome console下可以看到iphone4 5 5s 6 都为2，6s为3）
eg: 如下图相同尺寸下 dpr=粉色的physical pixels / 绿色的logical pixels 此处的场景设备像素比就是2；

二、CSS的px

---

先看一下w3.org 的描述
原文链接：
https://www.w3.org/Style/Examples/007/units.en.html
译文链接：