合并媒体查询时如何添加特定的媒体查询规则 [英] How to add specific media query rule when media query combined

问题描述

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

I have two media query combined like below in my scss file:

    @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
    }

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

How would I add a specific rule for each query in that case?

推荐答案

恐怕您不能这样做.这是一个查询，具有两组规则，没有当前"查询.您可以像这样在新查询中重复这些规则:

I am afraid you can't do that. This is one query, with two sets of rules, there is no "current" query. You can repeat the rules in new queries like this:

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

ps: you are missing the class declaration on your example

这篇关于合并媒体查询时如何添加特定的媒体查询规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！