是否可以针对相同的 CSS 规则组合媒体查询?
Is it possible to combine media queries for same CSS rules?
我目前有这块代码。
@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;
... : ...
}
}
所以我不必再次编写相同的属性和值,因为它们是相同的。有任何想法吗?
我也搜索了 "setting more than 2 breakpoints inside a media query" 但是没有运气。
您不必在第二行再次添加@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;
... : ...
}
}
我目前有这块代码。
@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;
... : ...
}
}
所以我不必再次编写相同的属性和值,因为它们是相同的。有任何想法吗?
我也搜索了 "setting more than 2 breakpoints inside a media query" 但是没有运气。
您不必在第二行再次添加@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;
... : ...
}
}