一、什么是響應式布局？
就是一個網(wǎng)站能夠兼容多個終端耀石，而不是為每個終端做一個特定的版本。
1. 響應式布局的優(yōu)點？
1）面對不同分辨率設備靈活性強
2）能夠快捷解決多設備顯示適應問題
2. 響應式布局的缺點滞伟？
1）兼容各種設備工作量大揭鳞，效率低下
2）代碼累贅，會出現(xiàn)隱藏無用的元素梆奈，加載時間加長
二野崇、 Media Qurey(媒介查詢)
設備屏幕的寬和高：device-width device-height
渲染窗口的寬和高：width height
設備的手持方向：orientation
設備的分辨率：resolution
1. 使用方法：
外聯(lián)
內(nèi)嵌樣式
3.實例
1）當屏幕寬度小于640px時，背景色為灰色亩钟，反之則為藍色
HtML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實現(xiàn)響應式布局效果</title>
<link href="lesson23.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)">
<!--only screen and (...)設置當屏幕寬度在640px范圍之內(nèi)時乓梨，才會顯示css樣式-->
<style>
@media screen and (min-width:640px ){
body{
background-color: #6bb2ff;
}
}
</style>
</head>
<body>
</body>
</html>
CSS（lesson23.css）：
*{
margin: 0;
padding: 0;
}
body{
background-color: #cccccc;
}
2）實現(xiàn)當屏幕寬度大于960px時不同的渲染效果。
屏幕寬度大于960px
屏幕寬度在600-960px范圍內(nèi)
屏幕寬度小于600px
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width,initial-scale = 1">
<title>實現(xiàn)響應式布局效果</title>
<link href="lesson23.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="heading"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footing"></div>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
}
.heading,.container,.footing{
margin: 10px auto
}
.heading{
height: 100px;
background-color: chocolate;
}
.left,.right,.main{
background-color: cornflowerblue;
}
.footing{
height:100px ;
background-color: aquamarine;
}
@media screen and (min-width: 960px) {
.heading,.container,.footing{
width:960px ;
}
.left,.main,.right{
float: left;
height: 500px;
}
.left,.right{
width: 200px;
}
.main{
margin:0 5px;
width:550px;
}
.container{
height: 500px;
}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
.heading,.container,.footing{
width: 600px;
}
.left,.main{
float: left;
height: 400px;
}
.right{
display: none;
}
.left{
width: 160px;
}
.main{
width:435px;
margin-left: 5px;
}
.container{
height: 400px;
}
}
@media screen and (max-width: 600px){
.heading,.container,.footing{
width:400px;
}
.left,.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 10px;
width: 400px;
height:200px;
}
.right{
margin-top:10px;
}
.container{
height: 420px;
}
}
