屏幕像素缩放比 dpr 的那些事儿

很久没发文章啦，

昨天在开发的时候遇到了这样一个问题，后来翻阅找到了这样一种解释，先举个栗子：

iphone4 的dpr 公认的是1.0 我们在CSS上面设置1px，然后其在屏幕上呈现结果就是1px。而iphone5的dpr是2.0，所以我们在开发的时候在CSS里面设置了1px的时候就是会放大2倍，所以1个csspx会用1*2的平方即4个设备像素来展示(记住X，Y两个方向都是放大2倍的，本来一个像素点的显示就被放大到四个像素点来显示了。    但是！！！css 中的 px 不是物理像素. css px 和物理像素的对应关系, 他是与 viewport 的缩放有关.在理想 viewport 下, dpr 就是 css px 与物理像素的比例, 因而可以推导出在其他缩放比例下 css px 与物理像素的换算关系了. 例如在 scale=1/dpr 缩放下, css px 与物理像素一一应在现代的工作流程中, 设计师和程序员都不需要 (太) 关注物理像素.