一、移动端相关概念
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; 默认值