CSS响应式布局
div{
border:1px solid rebeccapurple;
}
.header{
width: 80%;
height: 100px;
margin: 0 auto;
background-color: #4CAF50;
}
.content{
display: flex;
width: 80%;
margin: 0 auto;
}
.content-left{
flex: 0 0 300px;
width: 300px;
height: 100px;
background-color: #008CBA;
}
.content-middle{
flex: 1;
height: 100px;
background-color: #f44336;
}
.content-right{
flex: 0 0 300px;
width: 300;
height: 100px;
background-color: #e7e7e7;
}
@media screen and (max-width: 1000px){
.content{
width: 100%;
}
}
@media screen and (max-width: 800px){
.content-right{
display: none;
}
}
@media screen and (max-width: 600px){
.content-left{
display: none;
}
}
//下面是HTML代码
<div class="header">假装是淘宝网</div>
<div class="content">
<div class="content-left">淘宝图</div>
<div class="content-middle">搜索框</div>
<div class="content-right">二维码</div>
</div>
网页最初的模样
当屏幕最宽为1000px时,content DIV变成100%
但屏幕最大宽度为800时,隐藏二维码
当屏幕最大宽度为600时,隐藏淘宝图
是不是很简单!