响应式布局

响应式布局的概念是为了让网页在不同分辨率的屏幕上都有较好的展示效果，即需要应用不同的css样式。

响应式布局

目前项目中针对这一情况，采取css3单位 rem + 媒体查询 实现响应

1、REM (root element)

html,body{
	font-size:100px;
}
.text{
	font-size:0.12rem;
}

rem相对于根元素大小，html的font-size：100px，那么1rem = 100px ；

所以 text的size是0.12*100px = 12px；

此时当改变html的font-size，就可以改变rem的大小，所以我们不把html写死，不写成px。

当设计稿是1366*768时，我们按这个标准得到1rem = 100px；

那么当浏览器屏幕分辨率变为1920*1080时，100/1366 = x/1920；

x = 1920/13.66；所以，percentage（百分比） = window.innerWidth/13.66;

在浏览器窗口每次调整后，监听resize事件，重置font-size = percentage，实现响应式布局。

2、媒体查询

浏览器的可视区域宽度小于400px:
@media screen and ( max-width:400px ) {…}

浏览器的可视区域宽度大于400px:
@media screen and ( min-width:500px ) {…}

浏览器的可视区域宽度小于1152px，高度小于600px:
@media (max-width: 1152px), (max-height: 600px) {…}

3、同时要保证文字，图片自适应

.img{
	width:****rem;  
	background: url(..／picture.png) center center no-repeat;  
	background-size: 100% auto;  
}