css - Susy 响应式网格

Question

我已经定义了一个基于 Susy 的响应式网格系统来处理 4(移动)、8(平板电脑)和 12(桌面)列。我的布局有一个固定的标题栏，它分为“ Logo ”和“工具栏”两部分。

“logo”div 没有嵌套在 Susy 的网格容器中，而是绝对定位，总是在最左边。

“工具栏”div 包含 Susy 网格容器并包含搜索和注销操作 - 到目前为止还不错 :)

当调整浏览器大小时，当没有更多空间容纳 12 列时，网格的性质会更改总列数。这会导致以下问题:

“logo”div 被网格覆盖，因为它是绝对定位的。

有没有办法告诉 Susy 在到达“ Logo ”div 的黑色边框之前将布局拆分为 8 列？

如有任何建议，我们将不胜感激。提前致谢。

Answer 1

@Eric:我设法让它工作了。这是使用的:

@mixin update-container {
    @include container;
    @include susy-grid-background;
}

.page {
    @include update-container;

    @include at-breakpoint(865px 8 1149px) {
        @include update-container;
    }

    @include at-breakpoint(1150px 12) {
        @include update-container;
    }
}

所以我已经明确描述了最小和最大宽度来告诉列何时更改。这是“正确”的方法还是有更优雅的方法来解决这个问题？

谢谢 :)