移动端前端开发总结

1.兼容不同尺寸屏幕适配问题

（1）首先页面布局采用rem单位。
（2）通过在根节点html中设置font-size为px为单位来影响rem的实际大小。由于rem是根据根节点的大小来显示。
例如：

html
{font-size:16px;}
h1
{font-size:1rem;}

2.理解dpr

（1）物理像素
一个物理像素是显示器（手机屏幕）上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

（2）设备独立像素（逻辑像素）
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（如：CSS像素），有时我们也说成是逻辑像素。

（3）设备像素比
设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系。

设备像素比=物理像素/逻辑像素(px)
注：在某一方向上，x方向或y方向

例如：
iphone6的dpr为2，物理像素750(x轴)，则它的逻辑像素为375，也就是说，一个逻辑像素在x轴和y轴方向，需要2个物理像素来显示，如下图：

问题：为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢？
iPhone6的满屏宽度是375px（Viewport’s device-width (in CSS pixels)：375px），而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍，并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面，设计师一般给出750px的设计图，我们再根据需求对元素的尺寸设计和压缩。

3.理解PPI

PPI指屏幕的像素密度。屏幕每英寸的像素数量，即单位英寸内的像素密度。
PPI全称Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。
例如：在1英寸单位面积内拥有的像素越多，密度越大，PPI值就越高，但像素密度的实际意义是什么呢？它表达的是什么？或高或低对设备显示来说有什么影响？
一般来说，我们当然希望PPI值越高越好，因为更高的PPI意味着在同一实际尺寸的物理屏幕上能容纳更多的像素，能够展现更多的画面细节，也就意味着更平滑的画面。

4.理解DPI

dpi表示每英寸像素数，也叫做屏幕密度，这个值越大，屏幕就越清晰，如120dpi,160dpi等，如：(320240)分辨率的屏幕物理尺寸是(2英寸1.5英寸)，dpi=160
DPI表示打印机每英寸可以喷的墨汁点（印刷行业）
dpi计算：
如果一个手机分辨率是800*480，大小是3.7，求它的dpi是多少？
先通过长和宽得出斜角线的长度是933,
dip=933/3.7得出dpi的值是252

5.viewport

一个常用的针对移动网页的viewport meta标签：

<meta name="viewport" content="width=device-width",initial-scale=1.0">

注释：
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。