移动端开发基础

移动开发像素知识

px：css pixels 逻辑像素，浏览器使用的抽象单位

dp：物理像素（设备无关像素），跟手机设备有关

dpr：设备像素缩放比，控制px和dp两者的关系

DPI：打印机每英寸可以喷的墨汁点

PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度

计算公式：1px = (dpr)^2 * dp

以iphone5为例子：（屏幕分辨率：1136 * 640，4英寸，dpr：2）

通过上述公式可计算得：320px * 568px（有些人不会算的，自己慢慢琢磨！）

关系图

如果还是不懂，可以直接通过浏览器的开发者模式观看。

手机模拟器

PPI（每英寸的像素密度）的计算：（以iphone5为例子）

计算公式

也可以知道PPI越高，屏幕越清晰，可视度越低，系统的默认缩放比（dpr）越大。

可以从电脑的设备分辨率知道（分辨率越大，图标显示越小；分辨率越小时，图标显示变大，同时屏幕清晰度降低）

为什么呢？？？    因为：1px中等于更多的物理像素了！！！

拓展下:

Retina屏（高清屏）：dpr都是大于等于2