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

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

恐怕你做不到。这是一个查询，有两组规则，没有“当前”查询。您可以像这样在新查询中重复规则:

@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:你的例子中缺少类声明