响应式布局

图示1：

图示2：

图示3：

html:

	
	
	
	



	

		
瓢城旅行社
		

			

				
首页
				
旅游资讯
				
机票订购
				
风景欣赏
				
关于公司
			
		
	

css:

*{
	margin: 0;
	padding: 0;
}
body{
	background-color: #f5f5f5;
}
#header {
	width: 100%;
	height: 70px;
	background-color: #333;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
#header .center {
	max-width: 1263px;
	height: 70px;
	margin: 0 auto;
}
/*logo*/
#header .logo {
	width: 30%;
	height: 70px;
	background: url(../img/logo.png) no-repeat left center;
	text-indent: -9999px;
	float: left;
}
#header .center .link{
	width: 55%;
	height: 70px;
	line-height: 70px;
	float: right;
}
#header .center .link li{
	width: 20%;
	text-align: center;
	float: left;
	list-style-type: none;
}
#header .center .link li a{
	display: block;
	text-decoration: none;
	color: #eee;

}
#header .center .link li a:hover,#header .active a{
	background:#000;

}
.sm-visible {
	display: none;
}
/*响应式*/
@media (min-width: 1200px) {
	
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {

}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
	
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
	#header, #header .center, #header .link {
		height: 45px;  /*宽度减小*/
	}
	#header .logo, .sm-hidden,.sidebar,.md-hidden {
		display: none; /*元素消失*/
	}
	#header .center .link {
		width: 100%;
		line-height: 45px;/*调整行高*/
	}
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
	#header, #header .center, #header .link {
		height: 45px;
	}
	#header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden  {
		display: none;
	}
	#header .center .link {
		width: 100%;
		line-height: 45px;
	}
	#header .center .link li {
		width: 25%;
	}
	
}

注意点：

1 上下文选择器要一致：上面如果写成#header .center  .link 响应式也要这样写，不可写成#header .link即使是一个意思