Question

我的.cssClass包含：

// fallback without calc
width: 60%; 
@media (max-width: 500px) { width: 58%; }
@media (max-width: 460px) { width: 55%; }
@media (max-width: 420px) { width: 50%; }
@media (max-width: 380px) { width: 45%; }
@media (max-width: 340px) { width: 40%; }
// using calc
width: -webkit-calc(70% - (34px + 1.12em));
width: -moz-calc(70% - (34px + 1.12em));
width: -ms-calc(70% - (34px + 1.12em));
width: -o-calc(70% - (34px + 1.12em));
width: calc(70% - (34px + 1.12em));

因此，如果浏览器支持calc，它将替换先前定义的宽度（60％），并将使用calc方法。

然而，在调整大小时，它仍在使用媒体查询，将calc值替换为查询值。

我在不支持calc的浏览器中得到了很好的结果，因为它只是省略了所有这些，但支持calc的浏览器，获得与回退查询混合的calc结果。

我该怎么办？如果没有calc支持，我只希望运行媒体查询。

我正在寻找一种不涉及JavaScript的解决方案或其他方法。

Answer 1

SASS将对嵌套属性进行排序，以使媒体查询持续。

以下是发生的事情的一些例子：

SCSS

body {
    background: #000000; //black

    @media (max-width: 500px) { 
        background: #990000; //red
    }

    background: #000099; //blue

    @media (max-width: 300px) { 
        background: #009900; //green
    }
}

输出CSS

body {
    background:#000;
    background:#009
}
@media (max-width: 500px) {
    body {
        background:#900
    }
}
@media (max-width: 300px) {
    body {
        background:#090
    }
}

<强> Demo

你可以做的是放入第二个巢来操纵排序顺序：

<强> SCSS

body {
    background: #000000; //black

    @media (max-width: 500px) { 
        background: #990000; //red
    }


}
body {
    background: #000099; //blue

    @media (max-width: 300px) { 
        background: #009900; //green
    }
}

输出CSS

body {
    background:#000
}
@media (max-width: 500px) {
    body {
        background:#900
    }
}
body {
    background:#009
}
@media (max-width: 300px) {
    body {
        background:#090
    }
}

<强> Demo

所以你可以用你的代码做到这一点，它应该按照正确的顺序排序：

<强> SCSS

.cssClass {
    // fallback without calc
    width: 60%; 
    @media (max-width: 500px) { width: 58%; }
    @media (max-width: 460px) { width: 55%; }
    @media (max-width: 420px) { width: 50%; }
    @media (max-width: 380px) { width: 45%; }
    @media (max-width: 340px) { width: 40%; }
}
.cssClass {
    // using calc
    width: -webkit-calc(70% - (34px + 1.12em));
    width: -moz-calc(70% - (34px + 1.12em));
    width: -ms-calc(70% - (34px + 1.12em));
    width: -o-calc(70% - (34px + 1.12em));
    width: calc(70% - (34px + 1.12em));
}

CSS优先级和媒体查询

1 个答案: