我有 .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 结果。
我该怎么办?如果没有计算支持,我只希望媒体查询运行。
我正在寻找不涉及 JavaScript 的解决方案或其他方法。
最佳答案
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
}
}
您可以做的是放入第二个嵌套来操纵排序顺序:
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
}
}
所以你可以用你的代码来做到这一点,它应该按正确的顺序排序:
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 优先级和媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13794705/