css - Susy：基于最大 px 值的流体网格

Question

我正在尝试制作一个流体网格，其最大宽度具有以下值：

当浏览器的大小调整到 1264px 以下（允许主体上的 20px 填充）时，所有内容（边距、装订线和列）都应该按比例缩小。这可能吗？

我已经尝试过这些方法：

第一次尝试：

$total-columns  : 12;
$column-width   : 56px;
$gutter-width   : 40px;
$grid-padding   : 56px;

这不起作用，因为填充固定在 56px 并且不会缩小。

第二次尝试：

$total-columns  : 12;
$column-width   : 4.575163%;
$gutter-width   : 3.267973%;
$grid-padding   : 4.575163%;

$container-width: 1224px;

这几乎可以工作，但由于某种原因，网格填充大于列宽......

我错过了什么？谢谢！

score 0 · Accepted Answer

Susy 1.0 处理网格填充与列和排水沟不同。为了实现您正在寻找的东西，我们必须对连续的第一个和最后一个元素都要求特殊类。这就是 Susy 0.9 的工作方式，但它为大多数人抱怨的功能增加了很多复杂性。现在，将网格填充添加到容器而不是元素中，您想要的东西是不可能的。

网格填充现在直接添加到容器中，无需任何数学运算。在您的第一个示例中，这意味着它不会弯曲。在您的第二个示例中，浏览器将其解释为整个视口的百分比，而排水沟是容器的百分比，因此导致宽度不同。

1 回答 1