是否可以为相同的CSS规则组合媒体查询？

我现在有这段代码

@media screen and (min-width: 768px) and (max-width: 990px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

@media screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

我想做的是

@media screen and (min-width: 768px) and (max-width: 990px),
@media screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

因此，我不必再次编写相同的属性和值，因为它们是相同的。有什么想法吗？

---

我还搜索了“在媒体查询中设置2个以上的断点”，但没有成功。

您不必在第二行中再次添加@media。这应该起作用：

@media screen and (min-width: 768px) and (max-width: 990px),
screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

---

您可以在媒体查询中使用

或

。为什么不将其保留在630px查询中？假设你先做这个手机，就没有必要再申报了？@Barmar谢谢，我会试试的@而且我通常需要768和@aniskhan001的规则，明白了：）