响应式网页布局实战-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式</title>  
		<!-- 当前屏幕的宽高，为当前设备的宽度，按比例缩放 -->                 
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="css/style.css">
	<style>
		
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="content">
		<div class="left"></div>
		<div class="main"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

*{
	padding: 0px;
	margin: 0px;
}
.header,
.content,
.footer{
	margin: 10px auto;

}
.header{
	height: 100px;
	background-color: yellow;
}
.left,
.main,
.right{
	background-color: black;
}
.footer{
	height: 100px;
	background-color:red ;
}
/* 960*/
@media screen and (min-width: 960px){
	.header,
	.content,
	.footer{
		width: 960px; 
	}
	.left,
	.main,
	.right{
		float: left;
		height: 500px;
	}
	.left,
	.right{
		width: 200px;
	}
	.main{
		margin-left: 5px;
		margin-right: 5px;
		width: 550px;
	}
	.content{
		height: 500px;
	}
}
/* 600-960 */
@media screen and (min-width: 600px) and (max-width: 960px){
	.header,
	.content,
	.footer{
		width: 600px;
	}
	.left,
	.main{
		float: left;
		height: 400px;
	}
	.right{
		display: none;
	}
	.left{
		width: 160px;
	}
	.main{
		width: 435px;
		margin-left: 5px;
	}
	.content{
		height: 400px;
	}
}
/* 600以下 */
@media screen and (max-width: 600px){
	.header,
	.content,
	.footer{
		width: 400px;
	}
	.left,
	.right{
		width: 400px;
		height: 100px;
	}
	.main{
		margin-top: 10px;
		width: 400px;
		height: 200px
	}
	.right{
		margin-top: 10px;
	}
	.content{
		height: 420px;
	}
}

转载于:https://my.oschina.net/xiaojunx/blog/884641