css3移动端布局

一、移动端相关概念

1.屏幕尺寸

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

常见移动端设备屏幕尺寸

iphone4 3.5英寸

iphone6,6s,7,8 4.7英寸

iphone6,7,8plus 5.5英寸

2.屏幕分辨率

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

常见移动端设备屏幕分辨率

iphone6,6s,7,8 750*1334

iphone6,7,8plus 1080*1920

iphone5 640*1136

iphone4 640*960

3.ppi

屏幕上每英寸可以显示的像素点的数量叫做屏幕像素密度，单位为ppi，即pixels per inch的简写

4.DPR

DPR是devicePixelRatio的简写方式，叫做设备像素比

DPR=物理像素/逻辑像素

物理像素：屏幕分辨率

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

常见移动端设备dpr值

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

iphone6,7,8plus dpr=3

5.移动端meta设置视图窗口的大小

默认情况下，在手机设备上，视图窗口的宽度大于设备的实际宽度，这样就会导致页面显示效果异常，所以在移动端布局中，要通过meta设置视图窗口宽度等于设备宽度，并且不允许缩放

即：快捷键： meta:vp tab键

在移动端页面的head部分添加这句话

二、常见的移动端布局方案

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

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

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

典型案例：拉勾网

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

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

典型案例：网易移动端

3.混合布局

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

三、移动端布局相关单位

1.px

像素，相对于屏幕分辨率而言

2.em

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

注: a) em的值是不固定的，会跟随父元素字体大小发生改变

b) 默认情况下， 1em = 16px = medium = 12pt

3.rem

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

4.vw

vw是指viewport width,视窗宽度

1vw = 视窗宽度的1%

注: a) vh 视窗高度

b) vmin vw和vh中的较小值

c) vmax vw和vh中的较大值

注：在使用等比例缩放布局这种方式时，有以下两种设置

a) 750的设计稿 html{font-size:26.67vw;}

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

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

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

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

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

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

注：当没有添加文档声明时，就会触发某些浏览器的怪异模式，如IE6

五、如何将标准盒模型转换为怪异盒模型

语法：box-sizing:border-box;

注：box-sizing:content-box; 默认值