Question

我为每个样式声明做了一个单独的媒体查询。如果媒体查询相同，我假设您可以在同一媒体查询中对所有声明进行分组。我该怎么做？

@media only screen and (min-width: 960px) {
.component-text-block.small-image .no-wrap-text-right {
    width: 390px;
   }
}

@media only screen and (min-width: 960px) {
.component-text-block.small-image .image.left img {
    width: 168px;
   }
}

@media only screen and (min-width: 960px) {
.component-text-block-fullwidth.small-image .content-item img {
    width: 250px;
   }
}

Answer 1

CSS语法是：

@media not|only mediatype and (media feature) {
    CSS-Code;
}

因此，您可以包含所有 CSS代码，如下所示：

@media only screen and (min-width: 960px) {
.component-text-block.small-image .no-wrap-text-right {
    width: 390px;
   }
.component-text-block.small-image .image.left img {
    width: 168px;
   }
.component-text-block-fullwidth.small-image .content-item img {
    width: 250px;
   }
}

在同一媒体查询中对所有声明进行分组

1 个答案: