網頁佈局
1、固定寬度佈局
2、流式佈局
3、柵欄式佈局
4、響應式佈局
5、flex佈局
響應式佈局
缺點：寫很多冗餘的代碼，網頁體積變大，應用移動設備帶來很大的性能問題
（適用於沒有複雜交互的頁面）
案例
<style>
.container{
width:1200px;
margin: 0 auto;
height:1200px;
background-color: red;
}
/*媒體查詢：注意and後面空格的添加*/
/*iphone: w < 768px*/
@media screen and (max-width: 768px)and (min-width: 0px){
.container{
width:760px;
background-color: green;
}
}
/*pad: w >= 768 && w< 992*/
@media screen and (max-width: 992px) and (min-width: 768px) {
.container{
width:750px;
background-color: blue;
border: 1px solid black;
border-radius: 200px;
}
}
/*中等屏幕 w >= 992 && w<1200*/
@media screen and (max-width: 1200px) and (min-width: 992px) {
.container{
width:100%;
background-color: pink;
}
}
</style>
<body>
<div class="container"></div>
</body>