自适应网页案例：WordPress博客
来自CloudWiki
网页效果图
网页布局图
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<style type="text/css">
.header{width:100%;
height:50px;
background:#333;}
.main{width:80%;
margin:0 auto;
height:auto;}
.m1{width:70%;
height:600px;
background:#060;
float:left;}
.m1-1{width:100%;
height:300px;
background:#09C;}
.m1-2{width:100%;
height:150px;
background:#963;}
.m1-3{width:100%;
height:150px;
background:#09C;}
.m2{width:30%;
height:600px;
background:#9F0;
float:left;}
.m2-1{width:100%;
height:200px;
background:#F93;}
.m2-2{width:100%;
height:200px;
background:#369;}
.clear{clear:both;}
.footer{height:100px;
width:100%;
background:#CCC;}
/*当页面的宽度在600px ~ 900px之间的时候，手机屏*/
@media screen and (max-width: 900px){
.m1 {
width:100%;
}
.m2 {
display:none;
}
}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="m1">
<div class="m1-1"></div>
<div class="m1-2"></div>
<div class="m1-3"></div>
</div>
<div class="m2">
<div class="m2-1"></div>
<div class="m2-2"></div>
</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
