0

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

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

顺便说一句，从移动优先的方法开始。

这是标记：

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

最后是当前失败的代码：

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

什么失败了？当从平板电脑网格中分离omega(2n)出来时.member list items，第二个列表元素会保留它，omega(2n)尽管它已移动到不需要它的桌面，因此会破坏所需的 5 栏显示。

从 Firebug#members-frontpage .member:nth-child(2n)中提取：#2 列表项。不希望它在那里。希望这是有道理的。

.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

哈克解决方案是.member element从父母的 .scss 巢中删除从手机到平板电脑的中断。

4

1 回答 1

0

是的，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;
}

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

于 2013-02-26T22:53:01.643 回答