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;

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

我错过了什么？谢谢！

Answer 1

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

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