media query和响应式布局

media query和响应式布局

①　使用 @media 查询可以针对不同的媒体类型定义不同的样式。

②　@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面。

③　重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media 媒介类型and|not|only (媒介特征) {  
	... 
}  

在head标签添加以下代码

<style type="text/css">
//设置默认的css样式
	#container{
		text-align:center;
		margin:auto;
		width:750px;
	}
	#container>div{
		border:1px solid #aaf;
		text-align:left;
		box-sizing:border-box;
		border-radius:12px 12px 0px 0px;
		padding:5px;
	}
	div#left{
		width:300px;
		height:260px;
		float:left;
	}
	div#main{
		width:450px;
		height:260px;
		float:left;
		clear:right;
	}
	div#right{
		width:750px;
		float:left;
	}
	//设置当浏览器宽度大于1000px时的css样式
	@media screen and (min-width:1000px){
		#container{
			text-align:center;
			margin:auto;
			width:960px;
		}
		#container>div{
			border:1px solid #aaf;
			box-sizing:border-box;
			border-radius:12px 12px 0px 0px;
			padding:5px;
		}
		div#left{
			width:240px;
			height:260px;
			float:left;
		}
		div#main{
			width:460px;
			height:260px;
			float:left;
			clear:none;
		}
		div#right{
			width:260px;
			float:left;
			height:260px;
		}
	}
	//设置当浏览器宽度小于480px时的css样式
	@media screen and (max-width:480px){
		#container{
			text-align:center;
			margin:auto;
			width:450px;
		}
		#container>div{
			border:1px solid #aaf;
			box-sizing:border-box;
			border-radius:12px 12px 0px 0px;
			padding:5px;
		}
		div#left{
			width:450px;
			height:150px;
			float:left;
		}
		div#main{
			width:450px;
			height:260px;
			float:left;
			clear:both;
		}
		div#right{
			width:450px;
			float:left;
			height:170px;
		}
	}
</style>

大部分手机浏览器宽度都被设计成980px，但实际上手机屏幕并不大，页面内容会显得特别小，不方便，为了在页面中改变浏览器宽度。
如下代码可将浏览器宽度设置为与手机屏幕宽度相同

<meta name="viewport" content="width=device-width,initital-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">