媒体查询案例之修改背景颜色
1、媒体查询一般按照从大到小，或者从小到大的顺序来。【从下到大写，代码会更简洁】
2、注意我们有最大值max-width 和最小值min-width都是包含等于的
3、实现：
当屏幕小于540像素，背景颜色变为蓝色（x <= 539）
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色( 540=<x <= 969）
@media screen and (min-width:540px) and (max-width:969px) {
body {
background-color: green;
}
}
当屏幕大于等于970像素的时候，背景颜色为红色（x >= 970）
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
注意：
（1）screen 还有 and 必须带上不能省略的
（2）我们的数字后面必须跟单位，就是px不能省略的
（3）颜色为绿色的区域可以利用css的层叠属性，简写为：
@media screen and (min-width:540px) {
body {
background-color: green;
}
}
