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

本文链接：https://blog.youkuaiyun.com/Spring_East/article/details/75268164

	响应式网页就是指能够根据页面的调整自动的调整网页的布局，可以适应不同的设备环境。

例：

	在页面显示为100%时，页面的所有部分都可以显示。

	当页面的宽度变小时，适应此界面，右部消失

	当屏幕的宽度继续变小时，中部也消失，左部依然存在，此时只剩上、左、下部

	代码如下：


<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/CSS.css" />
	</head>
	<body>
		<div id="top">顶部</div>
		<div id="cen">
			<div id="left">左部</div>
			<div id="center">中部</div>
			<div id="right">右部</div>
		</div>
		<div id="buttom">底部</div>
	</body>
</html>



*{
	margin: 0;
	padding: 0;
	overflow-y: hidden;
}
#top{
	width: 1366px;
	height: 150px;
	background: #adadad;
}
#cen{
	width: 100%;
	height: 360px;
}
#left{
	width: 30%;
	height: 360px;
	background: #00bfff;
	float: left;
}

#center{
	width: 40%;
	height: 360px;
	background: #008000;
	float: left;
}
#right{
	width: 30%;
	height: 360px;
	background: #4b0082;
	float: left;
}
#buttom{
	overflow: hidden;
	width: 1366px;
	height: 150px;
	background: #adadad;
}
@media screen and (max-width:409px) {
	#right{
		display: none;
	}
	#center{
		display: none;
	}
	#left{
	width: 100%;
	height: 360px;
	background: #00bfff;
	float: left;
	}
}
@media screen and (min-width:409px) and (max-width:957px)  {
	#left{
	width: 40%;
	height: 360px;
	background: #00bfff;
	float: left;
	}
	#center{
	width: 60%;
	height: 360px;
	background: #008000;
	float: left;
	}
	#right{
		display: none;
	}
}