Day16-媒体查询、VW+rem布局

回顾

@media screen and (min-width:1000px){
	.box{
		float:left;
	}
	.para{
		float:left;
	}
	.father:after{
		
	}
}
@media screen and (max-width:600px){
	.box{
		
	}
	.para{
		
	}
}
@media screen and (min-width:400px) and (max-width:600px){
	.box{
		
	}
	.para{
		
	}
}

移动端页面布局
html,body{
	height:100%;
}
*{box-sizing:border-box;}
1.meta
2.利用媒体查询给html设置不同分辨率下的font-size
	页面文字和元素单位都用rem
3.页面布局
	固定定位
4.二倍图
	dpr=物理像素/逻辑像素

vw+rem布局(等比缩放布局)

1.什么是vw
	1vw 视口宽度的1%
	100vw 视口宽度的100%
	1vh 视口高度的1%
	100vh 视口高度的100%
2.为什么要将html字体大小设置为100px
	如果按照昨天的算法,我们量取的是88px,除以2为44px,再除以12总会得到除不尽的小数
	所以除以100是合适的,因为只需要小数点向前移动两位
	html{
		font-size:100px;
	}
3.如何把100px换算成vw？
	- 根据设计稿iphone5:320px=100vw
		html{font-size:31.25vw;}
	- 根据设计稿iphone6:375px=100vw
		html{font-size:26.67vw;}