学习目标
-
1、 rem + 媒体查询 适配
-
2、 rem + vw 适配
-
3、 flexible 适配方案
-
4、 移动端布局实现方案
移动端页面布局
弹性布局(100%布局)——拉钩网 、天猫首页
等比缩放布局(rem布局)—网易、淘宝首页
vw,vh
vw:viewpoint width,
视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,
视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
vw, vh, vmin, vmax:
IE9+局部支持, chrome/firefox/safari/opera支持,iOS safari 8+支持, Android browser4.4+支持,chrome for android39支持
1、
Rem配合VW做等比缩放布局
1.Rem
rem是指相对于根元素的字体大小的单位。
2.根元素
如果根元素是相对设备尺寸自动变换。
3.VW
视窗宽度,1vw等于视窗宽度的1%。
4.VW转换成PX赋值给font-size
例:
设备的分辨率为640*1136,
逻辑像素为320*568
1VW=3.2px
Font-size:100px;转换成VW
font-size:31.25vw; 1rem=31.25vw
可一起结合写等比例缩放布局。
如果设计图为 640px html设置{font-size:31.25vw}
如果设计图为 750px html设置{font-size:26.67vw}
页面中的元素用rem单位来设置,rem就是相对于根元素<html>的font-size来计算的,flexible.js能根据<html>的font-size计算出元素的盒模型大小。这样就意味着我们只需要在根元素确定一个px字号,因此来算出各元素的宽高,从而实现屏幕的适配效果