因为最近有个移动端的小项目，在此稍微学习下移动端开发基础概念。免得用框架的时候莫名其妙。

 

px(CSS pixels)：逻辑像素，浏览器使用的抽象单位；

dp,pt(device independent pixels)：设备无关像素；

dpr(devicePixelRatio)：设备像素放缩比；

 

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

 

下面先解释下dp，为设备像素放缩比：

高清屏(Retina屏)：dpr都是大于等于2的。

 

以iPhone5为例，为640dp*1136dp。设备像素放缩比为2.0。

根据上面的公式可以得1px = (2)^2 * dp，这个是平面上的，那纬度上的就位：1px =  2 * dp；

所以：640dp * 1136dp => 320px * 568px

 

然后解释下上面那个ppi相关的概念：

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

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

这个像素是指硬件像素非px；

以iphone5为例：

ppi = √(1136^2 + 640^2) / 4 = 326ppi  (视网膜Retina屏)

PPI越高，像素越高，图像越清晰。

 

如下栗子：

下面是关于html下面的viewport相关。

在移动端的开发我们一般会加这句话：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">

就可以适应移动端了。

这里来简单说下里面的属性：

width：设置布局viewport的特定值（“device-width”）；

initial-scale：设置页面的初始缩放；

minimum-scale：最少缩放；

minimum-scale：最大缩放；

user-scalable：用户能否缩放；