0

我有一个div.article，它在 8 列布局上是 2 列宽。

在将布局增加到 12 列的断点处，我希望我的div.article仍然有 2 列宽。

请注意，由于流体容器，列宽不是固定的。

问题是当我的布局（和我的列宽）发生变化时div.article保持其原始宽度。它的宽度保持为 2“旧”列宽。

为了解决这个问题，我必须有这样的标记：

.article {
    @include span-columns(2); // original size
    @include at-breakpoint($mobile_portrait) {
        @include span-columns(2); // I must add this so its new width is large as 2 columns of the new layout
    }
}

有什么方法可以防止在流体网格上重复这样的标记？

4

1 回答 1

0

不，没有。这不是流体设计的问题。

你所做的在 Susy 词汇中被称为“魔法网格”。对于不同的屏幕尺寸，网格具有不同的列数。

为了使它工作，CSS 应该包含小屏幕和大屏幕布局的样式。你在这里所做的就是提供它们。请注意，当span-columns从内部调用时at-breakpoint，它会产生不同的值。

所以这是正确的方法。您应该对该代码感到满意。

看看 Susy 的魔法网格演示：http ://susy.oddbird.net/demos/magic/#demo-breakpoints

于 2013-06-25T12:08:43.597 回答