Web笔记-移动前端开发笔记

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

 

px(CSS pixels):逻辑像素,浏览器使用的抽象单位;

dp,pt(device independent pixels):设备无关像素;

dpr(devicePixelRatio):设备像素放缩比;

 

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

 

下面先解释下dp,为设备像素放缩比:

Web笔记-移动前端开发笔记_第1张图片

高清屏(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越高,像素越高,图像越清晰。

 

如下栗子:

Web笔记-移动前端开发笔记_第2张图片

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

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

就可以适应移动端了。

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

width:设置布局viewport的特定值(“device-width”);

initial-scale:设置页面的初始缩放;

minimum-scale:最少缩放;

minimum-scale:最大缩放;

user-scalable:用户能否缩放;

你可能感兴趣的:(Web相关技术,web前端)