注意：小值在上，大值在下
媒体查询 - 锐客网
>
.content {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: hotpink;
}
@media screen and (max-width: 768px) {
.content {
width: 100%;
background-color: blue;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
.content {
width: 750px;
background-color: green;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.content {
width: 970px;
background-color: red;
}
}
@media screen and (min-width: 1200px) {
.content {
width: 1170px;
background-color: yellow;
}
}
