前端：响应式布局的原理的学习

前端 响应式布局原理
重点学习
1、min-width样式
2、max-width样式
3、媒体查询---通过不同的媒体类型和条件定义样式规则
格式：@media screen and (min-width:800px){}
4、条件的格式写法
响应式布局就是根据屏幕的大小盒子也作出响应的变化

方便用户在不同的媒体上都有良好的交互体验

@charset "utf-8";
/*当显示器最小1001px时box宽度为33.33%也就是一排三个*/
@media screen and(min-width:1001px){
	.box{width:33.33%}
}
/*当显示器大于651小于1000时box为50%也就是一排可以有两个*/
@media screen and (max-width: 1000px)and(min-width:651px) {
	.box{
		width: 50%;
	}
}
/*当显示器小于650px时一排只有一个*/
@media screen and (max-width: 650px) {
	.box{
		width: 100%;
	}
}