【发布时间】：2017-01-14 02:26:16
【问题描述】：
我制作了一个“响应属性”mixin，它将一个 css 属性及其在五个不同断点处的值作为参数：
@mixin responsiveProp ($prop, $xs, $sm, $md, $lg, $xlg) {
@media only screen and (min-width: 0px) {
#{$prop}: $xs;
}
@media only screen and (min-width: 768px) {
#{$prop}: $sm;
}
@media only screen and (min-width: 992px) {
#{$prop}: $md;
}
@media only screen and (min-width: 1200px) {
#{$prop}: $lg;
}
@media only screen and (min-width: 1440px) {
#{$prop}: $xlg;
}
}
例如@include responsiveProp(height, 1300px, 900px, 550px, 500px, 500px);
这通常可以很好地减少 CSS 中的 LOC，但是当在 Chrome 开发工具中使用智能手机布局测试上述示例时，$xs 断点被 $sm 断点覆盖，尽管宽度小于 768px。我不明白为什么会这样。有什么想法吗？
【问题讨论】：
-
你应该结合 min 和 max：
...and (min-width: 0px) and (max-width:767px)(max 应该是下一个 min -1) -
@somethinghere 不，它仍然不起作用，它不应该有任何区别，因为满足条件的逻辑没有改变
-
你的输出是什么？您是否设置了正确的视口元标记？
-
啊，是的，我错过了视口标签。谢谢！
-
这种格式并没有真正的用处。您能否隔离输出并将其添加到您的帖子中？这里一定有别的东西在做某事。 （只是一个旁注，但如果你不小心，这个系统会使用@media 产生很多规则，所以请记住这一点）
标签： css sass media-queries google-chrome-devtools