Susy 响应式网格答案

【问题标题】：Susy Responsive GridsSusy 响应式网格
【发布时间】：2014-02-08 01:25:12
【问题描述】：

我定义了一个基于 Susy 的响应式网格系统，可处理 4（移动）、8（平板）和 12（桌面）列。我的布局有一个固定的标题栏，分为“徽标”和“工具栏”两个部分。

“logo” div 没有嵌套在 Susy 的网格容器中，并且绝对定位，始终位于最左侧。

“工具栏” div 包含 Susy 网格容器，并包含搜索和注销操作 - 到目前为止一切顺利 :)

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

“logo” div 与网格重叠，因为它是绝对定位的。

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

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

【问题讨论】：

是的。您现在如何定义断点？你能展示一下 sass 的小样本吗？
@EricMeyer：我已经更新了问题。
您可以将您的答案作为答案发布吗？供未来的问题查找者使用。

标签： css sass compass-sass susy-compass

【解决方案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;
    }
}

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

谢谢:)

【讨论】：