SUSY 静态网格，但根据分辨率设置宽度答案

【问题标题】：SUSY static grid, but with set widths according to resolutionSUSY 静态网格，但根据分辨率设置宽度
【发布时间】：2013-07-03 03:39:26
【问题描述】：

我对网络网格系统很陌生，但我想选择 SUSY 主要是因为有很多人推荐它。我想要实现的是类似于我在 Twitter 引导程序中看到的网格系统，其中列的宽度不是流动的，但整个网格宽度有两个或三个基于可用分辨率的预定义宽度。

因此，例如，我想要一个 8 列网格，如果可用，网格宽度为 1140 像素，否则为 960 像素。

我能够想出与 SUSY 类似的东西，其中我的最大容器宽度为 1140 像素，并且通过将最小宽度设置为 960 像素，它永远不会调整到低于该值的大小，但网格在两者之间是流动的，而且我的偏好当分辨率可用时，它可以简单地从一个切换到另一个。这主要是为了有2或3个可预测的布局。

如果有人能提供帮助，非常感谢。克里斯钱德勒

【问题讨论】：

【解决方案1】：

您想使用 Susy 的 static 输出。为此，请设置$container-style: static;。 See the docs on the official Susy site.

【讨论】：

嗨，埃里克。感谢您的回答，但我认为这不是我所需要的。在我看来，静态网格以一组分辨率为前缀。基本上我想要的是三个静态网格，它们都具有相同的列布局，但每列的宽度不同，并且只有在分辨率允许时才在这些网格之间切换。
因此，例如，如果 1140px 可用，它将自己配置为 1140 静态网格，但如果没有，则下降到 960 静态网格。这似乎是一个非常常见的解决方案，我认为 Twitter Bootstrap 网格的默认“响应”行为。
静态网格将以与流体/魔术网格完全相同的方式调整到媒体查询断点。只需使用at-breakpoint 更改不同视口大小的网格设置，即可获得所需的一切。
您确实需要在每个断点设置容器，或者使用container mixin 中的媒体查询快捷方式，或者在每个不同的断点重复该 mixin。
谢谢埃里克。我花了一些时间来做这件事，但最终还是做到了。