屏幕像素缩放比 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 与物理像素一一应在现代的工作流程中, 设计师和程序员都不需要 (太) 关注物理像素.




你可能感兴趣的:(易忽略方法集合,dpr,设备像素缩放比)