!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;text-decoration:none;list-style:none;
font-size:14px;font-family:"微软雅黑";text-align:center;
color:#fff;}
.clear{clear:both;}
#header,#content,#footer{margin:0 auto;margin-top:10px;}
#header,#footer{margin-top:10px;height:100px;}
#header,#footer,.left,.right,.center{background:#333;}
/*通用样式*/
/*手机*/
@media screen and (max-width:600px){
#header,#content,#footer{width:400px;}
.right,.center{margin-top:10px;}
.left,.right{height:100px;}
.center{height:200px;}
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
#header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{width:160px;margin-right:10px;}
.center{width:430px;}
}
/*PC*/
@media screen and (min-width:960px){
#header,#content,#footer{width:960px;}
.left,.center,.right{height:400px;float:left;}
.left{width:200px;margin-right:10px;}
.center{width:540px;margin-right:10px;}
.right{width:200px;}
}
</style>
</head>
<body>
<!--header start-->
<div id="header">哈</div>
<!--end header-->
<!--content start-->
<div id="content">
<div><p style="color: red;">l啊哈哈哈哈哈哈哈哈哈哈l啊哈哈哈哈哈哈哈哈哈哈l啊哈哈哈哈哈哈哈哈哈哈l啊哈哈哈哈哈哈哈哈哈哈l啊哈哈哈哈哈哈哈哈哈哈</p></div>
<div>center</div>
<div>right</div>
<div></div>
</div>
<!--end content-->
<!--footer-->
<div id="footer">footer</div>
<!--end footer-->
</body>
</html>
