网页布局
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>