使用媒体查询给不同当宽度区间（小于等于768、769992、9931199、大于等于1200）设置背景色，颜色自定
https://www.runoob.com/css3/css3-mediaqueries.html
根据你的 宽度 写 几个 media screen
格式大概是这样，里面的东西根据自己需要修改
/* 媒体查询 */
/* 媒体查询： 它是css3的属性，作用是监听浏览器屏幕尺寸的变化 */
/* max-width 小于等于 */
/* min-width 大于等于 */
/* 写法： */
/*1. @media screen and (max-width: 566px) {} */
/*2. @media (max-width: 566px) {} */
/* 特小屏幕 */
@media (max-width: 566px) {
.container {
width: 100%;
}
.box {
background-color: red;
}
}
/* 小屏幕 */
@media (min-width: 567px) and (max-width: 767px){
.container {
width: 500px;
}
.box {
background-color: green;
}
}
/* 中屏幕 */
@media (min-width: 768px) and (max-width: 991px){
.container {
width: 700px;
}
.box {
background-color: blue;
}
}
/* 大屏幕 */
@media (min-width: 992px) and (max-width: 1199px){
.container {
width: 900px;
}
.box {
background-color: orange;
}
}
/* 特大屏幕 */
@media (min-width: 1200px) {
.container {
width: 1200px;
}
.box {
background-color: pink;
}
}