0

我为 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）页面上有两个空白

两个缝隙

第一个可以用 overflow-x: hidden; 修复。在 %wrap 或 .mainwrap 上。但是 .mainwrap 和 .footwrap 之间的第二个差距是无法解决的。.mainwrap 和 .footwrap 之间边界的理想外观应如下所示。在 mainwrap 和 mainwrap 下方视觉上的页脚有一个可见的阴影：

期望的状态

但是通过所描述的 html 和 css 设置，我总是得到上面已经看到的差距：

有差距的现状

任何想法为什么？:(

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 auto; 当达到为容器定义的最大宽度时。padding-left/right 和 gutter-span 以及 max-width 的方式是否合适？

这是否意味着您必须为容器定义基本列号和最大宽度。当达到最大宽度时，您可以向上更改最大宽度并使用 add-grid() 重新定义活动网格设置并调整填充。您继续这样做，直到容器的最大宽度为 1400 或 1600 像素。在更宽的视口的断点上，您必须使用多个 gutter-span。总结起来会是这样吗？

$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;
}

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

最好的问候拉尔夫

4

1 回答 1

1

.mainwrap 和 .footwrap 之间的第二个差距无法修复。.mainwrap 和 .footwrap 之间边界的理想外观应如下所示。在 mainwrap 和 mainwrap 下方视觉上的页脚有一个可见的阴影：

你已经margin-bottom: 1em申请了.mainwrap。把它注释掉，你就可以开始了。

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

  1. 为什么要重复媒体查询？您可以在同一个调用中同时编写max-width和padding样式。breakpoint但问题是您不需要更改最大宽度。仅将最大宽度静态设置为最大最大值。
  2. 您可以同时拥有和max-width申请。无需选择性地应用它们。请注意将这些样式应用于哪些元素。paddingmargin 0 auto
  3. 如果您对静态填充没问题，例如padding: 0 1em，那么您甚至不需要任何断点。如果您需要相对于网格大小的填充，请不要犹豫使用断点。如果您觉得它们很笨重，请创建一个 mixin。
于 2013-12-11T07:27:19.147 回答