.test{
display:inline-block;
width:100px;
height:100px;
background:black;
}
@media screen and (max-width: 700px){
.test{
background:red;
}
}
@media screen and (max-width: 500px){
.test{
background:green;
}
}
现象：
窗口宽度为700px的时候，.test元素变红。
窗口宽度为500px的时候，.test元素变绿。
总结：
（1）媒体查询的宽度在等于给定宽度时，相应的样式会被应用
max-width:700px，指的是width<=700px则使用样式。
（2）媒体查询可以被覆盖，后面的@media会覆盖前面的。
但是不支持!important，@media screen and (max-width: 700px !important)是语法错误。
导致该媒体查询语句无效。
