！媒体查询中的重要声明

Question

我目前正在使用zurb基金会。使用下面的代码，无论视口大小如何，正文总是背景颜色为红色，

@media only screen and (min-width: 64.063em) {
.body {background: red;}
}

@media only screen and (min-width: 90.063em) {
.body {background: blue;}
}

@media only screen and (min-width: 120.063em) {
.body {background: green;}
}

只有当我添加！important声明时，身体颜色会随着视口大小的增加而改变颜色

@media only screen and (min-width: 64.063em) {
.body {background: red;}
}

@media only screen and (min-width: 90.063em) {
.body {background: blue !important;}
}

@media only screen and (min-width: 120.063em) {
.body {background: green !important;}
}

这似乎不是正确的做事方式，我做错了什么？

Answer 1

尝试添加最小和最大宽度

@media only screen and (min-width: 64.063em) and (max-width: 90.062em){
   .body {background: red;}
}