Question

我有一个用于在SCSS中构建响应式网格系统的mixin：

@mixin grid($cols, $marg) {
    margin: 0 $marg $marg 0;
    width: ( (100% - (($cols - 1) * $marg )) / $cols );

    &:nth-child(#{$cols}n){
        margin-right: 0;
    }
}
// $cols - number of columns
// $marg - gutter

我是从there获得的。

但它仅适用于第一次媒体查询（在我的情况下，屏幕宽度为480到768px）。当第二次媒体查询触发时，之前的网格元素不会覆盖'margin-right：0'。

请参阅DEMO

任何想法如何解决？

Answer 1

我已经知道了。而不是仅使用min-width：

@media screen and(min-width: 480px){
  li{ @include grid(2, 2%); }
}
@media screen and(min-width: 768px){
  li{ @include grid(3, 2%); }
}
@media screen and(min-width: 920px){
  li{ @include grid(4, 2%); }
}

我们只需要在媒体查询中写下最小宽度和最大宽度。

@media screen and (min-width: 480px) and (max-width: 767px) {
  li{ @include grid(2, 2%); }
}
@media screen and (min-width: 768px) and (max-width: 919px){
  li{ @include grid(3, 2%); }
}
@media screen and (min-width: 920px){
  li{ @include grid(4, 2%); }
}

请参阅DEMO

SASS响应式网格混合

1 个答案: