.customContainer{
height: 40px;
margin: 0 auto;
background-color: purple;
}
@media screen and (max-width: 768px){
.customContainer{
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
.customContainer{
width: 750px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.customContainer{
width: 970px;
}
}
<div class="customContainer"></div>
注意:‘and’后一定要加空格,否则媒体查询无效