一、相关概念
1.屏幕尺寸
屏幕尺寸是指屏幕对角线的长度，单位为英尺，1英尺=2.54厘米；
2.屏幕分辨率
是指横纵方向上的像素点数，单位是px 1px=1个像素点；
注：常见移动端设备屏幕分辨率
iphone 6.7.8 1334*750;
iphone6.7.8(plus) 1920*1080；
iphone5 1136*640;
iphone4 960*640;
我们把屏幕分辨率也叫做物理像素；
3. ppi
屏幕上每英寸可以显示的像素点的数量叫做屏幕像素密度，单位为ppi，是pixes per inch的缩写；
4. dpr
dpr是device pixel ratio的缩写，叫做设备像素比
dpr=物理像素 /逻辑像素 等价于 dpr=屏幕分辨率/实际设备大小；
注： 常见移动端设备dpr值；
iphone 4, 5,6,7,8 dpr=2;
iphone 6,7,8(plus) dpr=3;
物理像素：分辨率； 逻辑像素：设备大小；
5. viewport设置
我们会把手机浏览器的网页放在一个虚拟窗口中，而这个虚拟窗口要比实际设备的宽度大很多，一般为980px，这样就会导致我们浏览的网页显示很小，因此我们需要设置虚拟窗口宽度等于实际设备宽，保证网页显示正常；
<meta name="viewport content="width-device-width">
二、常见移动端布局方案及其特点
1. 百分比布局(流式布局)
特点：不管分辨率怎么变，顶部和底部的bar部分高度和位置都不变，文字流式，控件弹性，图片等比例缩放；
2. 等比例缩放布局(rem布局)
特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放；
3. 混合布局
特点：混合布局是指将多种布局方式融合在一起实现移动端的屏幕适配的方式；
三、 移动端相关单位
1.px
像素，相对于屏幕分辨而言；
2.em
相对于父元素字体大小的单位；
3.rem
相对于根元素字体大小的单位；
注：em跟随父元素字体大小发生改变，而父元素大小不固定，容易造成逐级复合的连锁反应，而根元素字体大小，可以让元素等比例缩放；
4.vw
vw是viewport width的缩写，是指视窗宽度；
注： 1vw = 视窗宽度的1%； px；
vmin vw和vn中较小值 vh视窗高度；
vmax vw和vh中较大值；
接下来进入一些扩展=>
