style960-640.css
.divleft {
width: 25%;
height: 200px;
background-color: red;
position: absolute;
left:0;
top: 0;
}
.divright {
width: 75%;
height: 200px;
background-color: indigo;
position: absolute;
left: 25% ;
top: 0;
}
style960.css
.divleft {
width: 20%;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
.divcenter {
width: 65%;
height: 400px;
background-color: #f4d526;
position: absolute;
left:20% ;
top: 0;
}
.divright {
width: 15%;
height: 200px;
background-color: indigo;
position: absolute;
left: 85% ;
top: 0;
}
style640.css
.divleft {
height: 200px;
background-color: red;
}
.divcenter {
height: 400px;
background-color: #f4d526;
}
.divright {
height: 200px;
background-color: indigo;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询的使用</title>
<link rel="stylesheet" href="style960.css" media="(min-width:960px)">
<link rel="stylesheet" href="style960-640.css" media="(min-width:640px) and (max-width:960px)">
<link rel="stylesheet" href="style640.css" media="(max-width:640px)">
</head>
<body>
<ul>
<h3>使用媒体查询实现响应式页面显示效果</h3>
<li>3个div块左，中，右，依次的背景色为红，黄，蓝</li>
<li>页面宽度大于等于960px时，可以同时显示3个div块，显示比例为20%,65%,15%</li>
<li>页面宽度在640px----960px时,只显示左和右,显示比例：25%,75%</li>
<li>页面宽度低于640px，那么3个块依次换行显示出来，默认都占满一行</li>
</ul>
<div class="divleft"></div>
<div class="divcenter"></div>
<div class="divright"></div>
</body>
</html>
