文章目录
一、移动端适配
rem 相对单位,根据根元素(html)的字体大小值计算的单位
1rem === 根元素字体大小值
默认情况下 1rem === 16px
为什么web app要使用rem?
实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小
移动端适配
将根元素(html)的字体大小值设置为动态值
html{
font-size: 100/屏幕宽度的1%===?vw
}
解释:通过用100除以当前屏幕宽度的1%,计算出100px占当前屏幕的多少vw
640*1%=6.4vw 当前屏幕宽度6,4vw
100/6.4=15.625vw
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支持