0

在 Foundation 框架中，有一个名为 的变量$column-gutter，它控制网格中列之间的间距。$column-gutter是否可以根据媒体查询状态有不同的值？我希望为我的桌面用户提供更宽的列间距，为移动用户提供更小的价值。

由于您无法在 SASS 的媒体查询中定位变量值，因此我想不出任何简单的方法，但也许您有不同的解决方案。作为一种解决方法，我尝试通过媒体查询定位我的 div 并覆盖填充属性，如下所示：

@media #{$small} { // This is for desktop
  .l-header, .l-menu, .l-submenu, .l-main, .l-footer {
    padding-left: 3em;
    padding-right: 3em;
  }
}

但这并不是一个很好的解决方案，因为那时我无法最大化另一个网格元素内的嵌套网格元素（因为父 div 的填充）。希望你能理解我的问题。

4

0 回答 0