学习目标
-
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字号，因此来算出各元素的宽高，从而实现屏幕的适配效果
501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
