Question

我有一个移动的第一个网站，有两个不同的网格设置。直到600px：

$sm-screen-grid: (
  columns: 5,
  gutters: 1 / 3
);

那些排水沟显示为2.5％填充，仍在试图弄清楚究竟是如何计算的。 600后我切换到12列网格。我的问题是我希望排水沟宽度仍然是2.5％。我似乎无法弄清楚要为排水沟指定什么值，因此它呈现为：

padding-left: 2.5%;
padding-right: 2.5%;

一个容器。

有什么建议吗？

Answer 1

Susy的数学变化取决于排水沟位置。基于该输出，我猜您正在使用inside设置。数学看起来像：

// target-width / context-width * 100%
$single-gutter: $gutters / ($columns + ($gutters * $columns)) * 100%;

在您的情况下，该等式的结果为5%，它分为左右填充 - 2.5%。据我所知，12列网格需要设置为1.5的排水沟才能获得相同的结果。这意味着，为了保持准确的2.5%，您的排水沟将比您的列更大。

请记住，百分比填充是根据包含元素计算的，而不是被填充的元素。因此，保持%相同不会保持列到排水沟的比例相同。如果您试图让排水沟始终2.5%，则应将装订线设置更改为.25并将其保留在那里。百分比输出将发生变化，但是列与天沟的比率将与任意数量的列保持一致。