Question

在我最大的桌面视图/断点中，我尝试完成与Susy演示页面（http://susy.oddbird.net/demos/magic/）相同的行为 - 当达到容器最大宽度时，每边的填充或边距都在增长容器本身保持最大宽度。

但我仍然对一些优点等单位以及实现所述填充/边距行为的最佳功能感到困惑。

我目前的一般Susy设置如下：

$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;

具体的Scss部分看起来像那样。我已经包括一个容器，并通过挤压边缘与它相边：

.sectionwrap{
    @include container;
    @include squish(3,3);
    @include breakpoint($medium) {
        @include squish(2,2);
    }
    @include breakpoint($small) {
        @include squish(1,1);
    }
}

但问题是容器和压扁区域都会成长，成长并按比例增长。可能有一个缺点是使用的单位是百分比？使用em或rem会更合理吗？

当总结并达到最大宽度（列数*（列宽+檐宽））时，自动只有压扁区域在理论上继续增长？但我尝试了它失败了。

我也尝试设置：

$container-width: 1000px;

但也没有运气。任何提示都表示赞赏。最好的问候拉尔夫

更新我首先将我的网站重新安排到移动设备上并且认为我得到了整个Susy网格概念，这个概念在最初的squish（）事件中有点误导。：s但不知怎的，我猜我又做错了。

// breakpoint variable set for Breakpoint - value is converted to em by Breakpoint
$fivehundred: min-width 500px;   

//basic Susy settings for the initial mobile viewport
$total-columns: 8;  
$column-width: 3em;
$gutter-width: 1em;
$grid-padding: 1em;

//modified Susy setting for a larger viewport
//intentionally chose larger numbers to see a significant change at the breakpoint
$largerviewport: 12,5em,1em,1em;

//the main content area wrapper class where i initially wanted to enlarge the container
//at each breakpoint step by step
.sectionwrap{
    @include container;
    @include breakpoint($fivehundred) {
        @include with-grid-settings($largerviewport);
    }
}

不知何故，容器宽度超过$ fivehundred断点，超出了初始值而不是$ greaterviewport。不知怎的，我担心这是在我的包装类中修改容器的错误方法？在我身边推理的另一个错误？最好的问候拉尔夫

更新2：好吧，这实际上很奇怪。我现在尝试了以下Sass代码：

.sectionwrap{
    @include container;
    background-color: red;
    @include breakpoint(500px) {
        @include with-grid-settings(24,7em,4em,1em); 
        background-color: green;
    }
}

返回的CSS如下所示：

.sectionwrap {
  max-width: 31em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  background-color: red; }
      .sectionwrap:after {
         content: "";
         display: table;
         clear: both; }
  @media (min-width: 31.25em) {
    .sectionwrap {
      background-color: green; 
    } 
}

不知怎的，整个网格设置被遗漏了？

更新3： 好的想出来的事情。在包含with-grid-settings功能之后，没有意识到有必要设置容器宽度。在另一个我刚改变排水沟的例子中，没有必要。但这似乎是。

.sectionwrap{
    @include container;
    @include breakpoint($fivehundred) {
        @include with-grid-settings($columns: 12, $width: 3em, $gutter: 1em, $padding: 1em){
                @include set-container-width;
        } 
    }
}

更新4 对于可能遇到类似问题的其他人来说，这可能会有所帮助。我只是想知道为什么我的with-grid-settings函数中设置的值没有得到尊重 - 特别是填充值。然后我意识到set container width只设置max-width值。但是要将所有输入的值应用于网格，您必须再次添加容器mixin，以便利用maxwidth和paddings。但现在一切似乎都很好并且有效。 ;）花了一段时间。干杯r。

Answer 1

%单位和squish mixin都在对你不利。默认情况下，Susy在容器上设置最大宽度，与您用于定义网格的单位相同。事实上，这就是所有这些单位的用途。如果您希望最大宽度位于px，请在px中定义网格。如果您希望em使用em。 $container-width是默认值的覆盖，因此应该有效。当你试图知道出了什么问题时，我必须看到你的实际代码。

我推荐这个：

$total-columns: 24;
$column-width: 30px; // adjust as needed
$gutter-width: 10px; // adjust as needed
$grid-padding: 0;

.sectionwrap{
  @include container;
}

其他任何事情都只是让事情过于复杂。

如何在Susy中设置最大容器宽度，只有填充/边距在较大的视口上保持增长？

1 个答案: