0 
<div class="grid">
  <header>header</header>
  <div>main</div>
  <footer>footer</footer>
</div>

我为三种屏幕尺寸定义了三个网格。标记包含三个元素，它们显示在每个屏幕尺寸的不同列中。

移动布局，主 div 保留在第一列，页眉和页脚显示在第二列

平板电脑布局，所有三个元素都在第二列重叠（因为margin-right：-100％;），似乎是一个错误。

桌面布局，唯一有效的布局，页眉/页脚/主显示在第五列

网格定义：

// grid columns
$grids      : 2;
$grids      : add-grid(6 at 40em);
$grids      : add-grid(12 at 50em);

// grid gutters
$gutters    : .2;

款式：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.grid {
  @include background-grid;
  margin: 0 auto;
  max-width: 1080px;
  min-height: 100%;
}

.layout {
  // mobile layout
  @include grid-span(1,2);
  // tablet layout
  @include breakpoint(40em){
    @include grid-span(4,2);
  }
  // desktop layout
  @include breakpoint(50em){
    @include grid-span(8,5);
  }
}

header, 
.grid div,
footer { 
  @extend .layout;
}

有人知道为什么会这样吗？

4

1 回答 1

0

奇点需要知道每一列的位置。第二个值grid-span是您设置的位置2并5强制列从这些位置开始。1如果您希望将内容放在第一列中，则可以将该值更改为。

听起来您也习惯于在页面上浮动列，因此之前的列会影响以下列的放置位置。默认情况下，Singularity 使用一种称为隔离的技术。您可以通过编写来切换到更传统的 float 方法$output: float。这些输出样式的文档可以在这里找到：https ://github.com/Team-Sass/Singularity/wiki/Output-Styles#float

于 2013-04-10T23:25:18.377 回答