Question

我为一个新项目给了Singularity一个旋转。到目前为止我一直在使用Susy。通常我更喜欢单独发布问题，但在目前的情况下，问题是相互关联的，处理一个中心点。设置如下。

我的主页是带有背景图像的标题和带有渐变的页脚，带有内容的容器应该是边距。主标记框架如下所示：

<div class="mainwrap">
  <header class="container"></header>
  <div class="container"></div>
</div>
<div class="footwrap">
  <footer class="container">
</div>

包装和容器的基本样式如下：

%wrap {
    width:100%;
    @extend %clearfix;
}

.mainwrap {
    @extend %wrap;
    background: image-url('texturetastic_gray.png') repeat top left;
    @include box-shadow(black 0.2em 0.2em 0.5em);
    margin-bottom:1em;
}
.footwrap {
    @extend %wrap;
    background-color: #484d51;
    @include background-image(linear-gradient(left, rgb(72, 77, 81), rgb(22, 25, 28)));
    @include filter-gradient(rgb(72, 77, 81), rgb(22, 25, 28), horizontal);
}

.container {
    @include background-grid;
    max-width:900px;
    margin: 0 auto;
    @extend %clearfix;
}

现在我有两个问题：

1）页面上有两个空白

The two gaps

第一个可修复overflow-x：hidden;在％wrap或.mainwrap上。但是.mainwrap和.footwrap之间的第二个差距是不可解决的。 .mainwrap和.footwrap之间边界的所需外观应如下所示。在主包裹和主包裹下面的页脚有一个可见的阴影：

Desired state

但是通过描述的html和css设置，我总能得到如上所述的差距：

Present state with gap

任何想法为什么？ :(

2）容器的设置这是我遇到的大部分问题中最不确定的部分，并问自己最好的做法是什么。我的基本设置是：

$grids: 4;
$grids: add-grid(6 at 550px);
$grids: add-grid(9 at 750px);
$grids: add-grid(12 at 900px);
$grids: add-grid(16 at 1200px);
$grids: add-grid(18 at 1400px);

$gutters:0.25;
$gutters: add-gutter(.20 at 900px);
$gutters: add-gutter(.15 at 1200px);

对于我添加的.container：

padding-left: gutter-span();
padding-right: gutter-span();

像在Github上的Singularity的一个论坛帖子中所建议的那样。但我仍然不确定最佳做法是什么。基本上我会有一个最小的填充切换到边距：0自动;当达到容器的定义的最大宽度时。填充左/右和沟 - 跨度以及最大宽度的方式是否合适？

这是否意味着您必须为容器定义基本列号和最大宽度。达到最大宽度后，更改最大宽度并使用add-grid（）重新定义活动网格设置并调整填充。继续这样做，直到容器的最大宽度为1400或1600px为止。对于更广泛的视口的断点，你必须使用多个沟槽跨度。总结起来，它看起来像是那？

$grids: 4;
$grids: add-grid(8 at 600px);
$grids: add-grid(12 at 900px);
$grids: add-grid(16 at 1400px);

$gutters:0.25;
$gutters: add-gutter(.20 at 600px);
$gutters: add-gutter(.15 at 900px);
$gutters: add-gutter(.10 at 1400px);

.container {
    @include background-grid;
    max-width:600px;
    @include breakpoint(600px) {
        max-width: 900px;
    }
    @include breakpoint(900px) {
        max-width: 1400px;
    }
    @include breakpoint(1400px) {
        max-width: 1600px;
    }

    margin: 0 auto;
    padding-left: gutter-span();
    padding-right: gutter-span();
    @include breakpoint(600px) {
        padding-left: gutter-span(2);
        padding-right: gutter-span(2);
    }
    @include breakpoint(900px) {
        padding-left: gutter-span(3);
        padding-right: gutter-span(3);
    }
    @include breakpoint(600px) {
        padding-left: gutter-span(4);
        padding-right: gutter-span(4);
    }
    @extend %clearfix;
}

但是，如果你想在容器上以细粒度的方式控制事物，那么基本上会导致相当多的断点？或者是否有更优雅的解决方案？

最好的问候拉尔夫

Answer 1

.mainwrap和.footwrap之间的第二个差距是不可修复的。 .mainwrap和.footwrap之间边界的所需外观应如下所示。在主包裹和主包裹下面的页脚有一个可见的阴影：

您已将margin-bottom: 1em应用于.mainwrap。评论它，你很高兴。

我仍然不确定最佳做法是什么。基本上我会有一个最小的填充切换到边距：0自动;当达到容器的定义的最大宽度时。

为什么要复制媒体查询？您可以在同一max-width次调用中同时编写padding和breakpoint个样式。但问题是你不需要改变最大宽度。将最大宽度静态设置为最大最大值。
您可以同时应用max-width，padding和margin 0 auto。无需选择性地应用它们。请注意将这些样式应用于哪些元素。
如果您对静态填充没问题，请执行以下操作： G。 padding: 0 1em，那么你甚至不需要任何断点。如果您需要相对于网格大小填充，那么请不要犹豫使用断点。如果你觉得它们很笨重，那就创建一个mixin。

如何在不同视口的Singularity中正确定义容器

1 个答案: