CSS3移动端布局

一、移动端相关概念

1.屏幕尺寸

屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米

常见移动端设备屏幕尺寸：

iphone6,7,8 4.7英寸

iphone6,7,8plus 5.5英寸

iphone4 3.5英寸

iphone5 4英寸

2.屏幕分辨率

屏幕分辨率是指横纵方向上的像素点数，单位为px，1px=1个像素点。

常见移动端设备屏幕分辨率(像素分辨率)：

iphone6,7,8 1334*750

iphone6,7,8(plus) 1920*1080

iphone5 1136*640

iphoneX 2436*1125

iphone4 960*640

3.ppi

ppi是指屏幕上每英寸可以显示的像素点的数量，单位为ppi,即（pixels per inch）,屏幕像素密度

4.DPR

DPR（devicePixelRatio）设备像素比

DPR= 物理像素/逻辑像素

物理像素：屏幕分辨率

逻辑像素：设备的实际尺寸

常见移动端设备DPR值：

iphone4,5,6,7,8 DPR=2

iphone6,7,8(plus) DPR=3

5.移动端meta设置

在移动端设备中，可视窗口的大小经常大于实际设备的尺寸，我们需要通过meta设置视图窗口的宽度等于设备宽，保证页面正确显示。

快捷键：meta:vp tab键

二、移动端常见布局方案

1.百分比布局(流式布局)

特点：顶部和底部不管分辨率怎么变，高度和位置都不变。

      文字流式，控件弹性，图片等比缩放

典型案例：拉勾网

2.等比例缩放布局(rem布局)

特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放

典型案例：手机网易网

3.混合布局

特点：将多个单位(px,rem,vw,百分比),多种布局方案(flex布局，圣杯布局等)混合在一起实现移动端屏幕适配的方案

三、移动端相关单位

1.px（像素）

相对于屏幕分辨率而言

2.em

相对于父元素字体大小的单位

注：默认情况下：

1em = 16px = 100% = 12pt = medium

3.rem

相对于根元素字体大小的单位

4.vw

vw是viewport width的缩写，是指视窗宽度

1vw = 视窗宽度的1%

注：vh 视窗高度

   vmin    vh和vw中较小值

  vmax    vh和vw中较大值

注： 如果使用rem布局方式，750的设计稿 html{font-size:26.67vw;}

                                         640的设计稿   html{font-size:31.25vw;}

四、标准盒模型和怪异盒模型

标准盒模型总宽度 = width+左右padding+左右border+左右margin

标准盒模型总高度 = height+上下padding+上下border+上下margin

怪异盒模型总宽度 = width + 左右margin (width包含了左右padding和左右border)

怪异盒模型总高度 = height + 上下margin (height包含了上下padding和上下border)

box-sizing:content-box|border-box;

content-box 默认值

border-box 将标准盒模型转换为怪异盒模型