<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Media Queries</title>
<style>
body{
margin: 20px 0;
}
#conterbody{
width:960px;
margin:auto;
}
p#top{
width:960px;
background-color: #982;
line-height:200px;
}
div#left{ /*控制center和 left*/
width:740px;
float: left;
background-color: #909090;
}
p{
line-height:600px;
text-align: center;
font-size: 2em;
margin: 0 0 20px 0;
color: #fff;
}
p#left-z{
width:200px;
float: left;
background-color: #0064ff;
}
p#left-y{
width:520px;
float: right;
background-color: #547;
}
p#right{
width:200px;
float:right;
background-color: #982;
}
/*最大1000px时候*****************************************************/
@media screen and (min-width: 1000px){
#conterbody{
width:1000px;
}
p#top{
width:1000px;
}
p#left{
width:780px;
float: left;
}
div#left-z{
width:200px;
float: left;
}
p#left-y{
width:520px;
float: right;
}
p#right{
width:200px;
float:right;
}
}
/*最大不超过999px 最小不小于640px**************************************/
@media screen and (min-width: 640px) and (max-width: 999px){
div#conterbody{
width:640px;
}
p#top{
width:100%;
}
div#left{
width:640px;
float: left;
}
p{
line-height: 430px; /*变化后高度缩小*/
}
p#left-z{
width:200px;
float: left;
}
p#left-y{
width:420px;/*640-200-20=420*/
float: right;
}
p#right{
width:100%;
line-height: 150px;
}
}
/*最大不超过639px **************************************************/
@media screen and (max-width:639px){
div#conterbody{
width:100%;
}
p#top{
width:100%;
}
div#left{
width:100%;
}
p{
line-height: 300px; /*变化后高度缩小*/
}
p#left-z{
width:100%;
}
p#left-y{
width:100%;
}
p#right{
width:100%;
line-height: 200px;
}
}
</style>
</head>
<body>
<div id="conterbody">
<p id="top">Top</p>
<div id="left">
<p id="left-z">Left</p>
<p id="left-y">Conter</p>
</div>
<p id="right">right</p>
</div>
</body>
</html>
/*Safari 版本5.1。7（7534.57.2）支持
chrome 版本26.0.1410.64 m 支持
opera 版本12.15 支持
fireFox 版本21.0 支持
IE10 版本10.0.92000.16580 支持*/
解决IE不支持<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
如果有什么些的不对，请各位及时指出，在下这里感谢了！！！
