Question

这个会把我送到一个早期的坟墓，提前感谢任何帮助把我拉出来。

简短的故事：从平板电脑网格突破到桌面网格时，列表元素上的多个at-breakpoints失败，但在从移动网格突破到平板电脑时效果很好。

从移动优先方法开始btw。

这是标记：

<html>
    .
    .
    .
    <div id="container">
        <div id="content">
            <article class="page">
                <ul id="members-frontpage">
                    <li class="member">
                    .
                    .
                    .
                    </li>
                </ul>
            </article>
        </div>
    </div>
    .
    .
    .
<html>

基础Susy配置：

@include border-box-sizing;

//Mobile First config
$total-columns  : 4;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

$show-grid-backgrounds  : true;

$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;

//Breaks
$break-to-medium: 30em 12; //break from phone to tablet
$break-to-large: 65em 25; //break from tablet to desktop

基本布局：

#container {
    min-height: 100%;
    height: 100%;
    @include container($total-columns, $break-to-medium, $break-to-large);
    @include at-breakpoint($break-to-medium) {
        @include set-container-width;
    }
    @include at-breakpoint($break-to-large) {
        @include set-container-width;
    }
}

最后是当前失败的代码：

什么有效？使用at-breakpoint从移动4列网格到平板电脑12列网格的中断。甜！

什么失败了？当从平板网格中断omega(2n)以显示.member list items的两列时，第二个列表元素保持omega(2n)，尽管已移至桌面而不是#members-frontpage .member:nth-child(2n)需要，从而打破了所需的5列显示。

直接从Firebug：.page { padding: 0 $grid-padding; @include at-breakpoint($break-to-medium) { @include susy-grid-background; } @include at-breakpoint($break-to-large) { @include susy-grid-background; padding: rhythm(1,16px) 0; @include squish(2,2); } } #members-frontpage { //ul @include clearfix; list-style: none; margin: 0; padding: rhythm(1,16px) 0 0 0; text-align: center; .member { //li position: relative; min-height: 15em; margin: 0 0 rhythm(2,16px) 0; border-radius: .75em; border: .1em solid rgba($green, .4); background: rgba(255,255,255,.4); //Here We Go @include at-breakpoint($break-to-medium) { @include span-columns(6,12); @include nth-omega(2n); } @include at-breakpoint($break-to-large) { @include span-columns(5,25); @include nth-omega(5n); } } //end .member .member-title { @include rhythm(0,.25,.25,0,16px); border-top-left-radius: .75em; border-top-right-radius: .75em; border-bottom: .1em solid rgba($green, .4); background: lighten($yellow, 34%); } .member-logo { @include rhythm(0,1,1,0,16px); max-width: 96%; height: 100% !important; } .member-content { position: absolute; width: 100%; bottom: 0; @include rhythm(0,0,1,0,16px); font-weight: bold; } } // end #member-frontpage获取＃2列表项。不希望它在那里。希望这是有道理的。

.member element

Hacky解决方案是从父母的.scss嵌套中移除{{1}}从手机到平板电脑的中断。

Answer 1

是的，Susy不能假设你想要在断点之间携带什么，以及你不想做什么。你必须明确，但Susy给你两个选择。一个基本上就是你已经在做的，但用漂亮的Susy语法编写：

@include at-breakpoint($break-to-large) {
  @include span-columns(5,25);
  @include remove-nth-omega(2n); // remove the old one
  @include nth-omega(5n);  // set the new one
}

另一种选择是更紧密地调整媒体查询的范围：

$break-medium-only: 30em 12 65em; // min and max width settings

如果您使用具有最小和最大设置的断点，则该断点的内容将不会延续到您的large样式。

不相关：您还可以简化容器设置。现在你正在重复自己。

@include container($total-columns, $break-to-medium, $break-to-large);

与

相同

@include container;
@include at-breakpoint($break-to-medium) {
  @include set-container-width;
}
@include at-breakpoint($break-to-large) {
  @include set-container-width;
}

你只需要一个或另一个。较长方法的唯一优点是，如果您因任何原因需要它，您可以获得更多控制权。但最简单的是，输出是相同的。

Susy多重响应混合失败

1 个答案: