Question

我的scss文件中有两个媒体查询，如下所示：

    @media all and (min-width: 600px) and (orientation: portrait),
    // add css rule to the above media query
    all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
       border: 1px solid #red
       // add specific css rule to current media query only
    }

在这种情况下，如何为每个查询添加特定规则？

Answer 1

恐怕你不能这样做。这是一个查询，有两组规则，没有＆＃34;当前＆＃34;查询。您可以在以下新查询中重复这些规则：

@media all and (min-width: 600px) and (orientation: portrait) {
    // styles
}

@media all and (min-width: 600px) and (orientation: portrait),
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
   // shared styles
}

ps：您缺少示例中的类声明

Answer 2

您可以使用变量来保存查询。同时嵌套@media以保持它们的有序性，因为所有@media规则都不会嵌套在CSS中。在@media规则中进行插值会很好，但它还没有工作。

$media: 'all and (min-width: 600px) and (orientation: portrait)';
$media2: 'all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait)';

@media #{$media} {
   color:red;

  @media #{$media}, #{$media2} {
      color:blue;
  }
}

媒体查询组合时如何添加特定媒体查询规则

2 个答案: