一.media query
針對不同的媒體裝置screen，進行比對，提供精準的控制,也可對媒體分辨率、色深等進行比對
1.文法：@media not|only 裝置類型 [and 裝置特性]*
其中 [and 裝置特性]可以出現無數次，可以對多個裝置特性進行比對
不管是電腦、手機還是平闆都對應于screen裝置
一般情況下格式為：@media screen and （裝置特性）{…}
2.針對浏覽器寬度響應式布局
分别是.html檔案和.css檔案，用于表示浏覽器寬度大于1000px、大于480px小于1000px、小于480px時的效果。
點選黃色區域（按f12或右鍵檢視元素），可以修改浏覽器寬度高度，同時檢視頁面變化的效果
<!DOCTYPE html>
<html token string">"en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>media</title>
<link rel="stylesheet" href="text.css">
</head>
<body>
<div id="container">
<div id="left">
<h2>hhhhhh</h2>
hhhhhh1
</div>
<div id="main">
<h2>llllll</h2>
lllllllll2
</div>
<div id="right">
<h2>dddddd</h2>
ddddddd3
</div>
</div>
</body>
</html>
#container{
text-align:center;
margin:auto;
width:750px;
}
#container>div{
border:1px solid #aaf;
text-align: left;
/*設定html元素的大小和邊框*/
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
padding:5px;
}
div#left{
width:300px;
float:left;
height:260px;
}
div#main{
width:460px;
float: left;
height:260px;
/*讓該元素的右邊不能出現float*/
clear:right;
}
div#right{
width:750px;
float: left;
}
@media screen and (min-width:1000px){
#container{
text-align:center;
margin:auto;
width:960px;
}
#container>div{
border:1px solid #aaf;
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
padding:5px;
}
div#left{
width:240px;
float:left;
height:260px;
}
div#main{
width:460px;
float: left;
height:260px;
clear:none;
}
div#right{
width:260px;
float: left;
height: 260px;
}
}
@media screen and (max-width:480px){
#container{
text-align:center;
margin:auto;
width:450px;
}
#container>div{
border:1px solid #aaf;
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
padding:5px;
}
div#left{
width:450px;
float:left;
height:150px;
}
div#main{
width:450px;
float: left;
height:260px;
clear:none;
}
div#right{
width:450px;
float: left;
height: 170px;
}
}
3.響應手機浏覽器
加入如下代碼，可以将浏覽器寬度設定與手機螢幕寬度一緻（content="width=device-width）、initial-scale=1.0為頁面縮放比例為1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0">
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)