
如何使用媒体查询实现更加精确的判断?
在提供的一个 html 代码示例中,当窗口宽度等于 992px 时,box 元素会呈现红色。为了实现更加精确的判断,需要当宽度大于 992px 时呈现蓝色,当宽度小于 992px 时呈现绿色,同时确保这三者样式必须分离,互不干涉。
为了满足这个需求,可以使用临界条件:
@media(min-width: 992.1px) {
.box {
background-color: blue;
}
}
@media(width: 992px) {
.box {
background-color: red;
}
}
@media(max-width: 991.9px) {
.box {
background-color: green;
}
}这样,当窗口宽度大于 992.1px 时,box 元素将呈现蓝色,当宽度小于 992px 时呈现绿色,而当宽度正好等于 992px 时,box 元素将呈现红色。这种方法确保了三者样式分离,互不干涉。










