Question

使用susy在整个宽度上拉伸嵌套div的推荐方法是什么？

我目前正在使用流血，并想知道这是否是正确的做法。

还有如何让设计响应移动先行？

这是我的HTML：

<div class="container">
    <div class="child1">
        <h4>Child1</h4>
        <div class="grandchild1">
            <p>Grandchild1</p>
        </div>
        <div class="grandchild2">
            <p>Grandchild2</p>
        </div>
        <div class="grandchild3">
            <p>Grandchild3</p>
        </div>
        <div class="grandchild4">
            <p>Grandchild4</p>
        </div>
    </div>
    <div class="child2">
        <h4>Child2</h4>
    </div>
    <div class="child3">
        <h4>Child3</h4>
    </div>
</div>

这是我的嫌疑人代码：

//Library imports
@import "compass/reset";
@import "compass/css3";

@import "susy";
@import "breakpoint";
$susy:( columns: 12, container: 100%, output: float, gutters: 1/3, global-box-sizing: border-box, debug: ( image: show, output: overlay, color: rgba(77, 171, 252, .5), toggle: top right, ), );
.container {
    @include container();
    width: 75%;
    margin-top: 20px;
    .grandchild1 {
        display: block;
        margin-bottom: 14px;
        background-color: green;
        padding: 10px;
    }
    .grandchild2 {
        display: block;
        @include container();
        margin-top: 4px;
        @include bleed(1em 2 10px 20% of 12 .25);
        width: 100%;
        background-color: dodgerblue;
    }
    .grandchild3 {
        margin-top: 10px;
        @include full;
        @include span(8 of 12);
        background-color: red;
    }
    .grandchild4 {
        margin-top: 10px;
        //  @include full;
        @include span(3.4 of 12);
        background-color: greenyellow;
    }
}
.child1 {
    margin-bottom: 10px;
}

Answer 1

您的问题和代码并不完全清楚，但我认为您试图让嵌套元素跨越完整的视口宽度？在CSS中没有正确的方法可以做到这一点，所以你做的任何事情（有或没有Susy）都是粗略的近似。

Susy的bleed是伪造它的一种方法，如果你希望内容保持原样，并且只有填充/边框/背景跨越整个宽度。 bleed mixin正在应用负边距来打破容器，并匹配正填充以保持内容到位。如果您希望内容也跨越整个视口，则应自行应用负边距。如果你需要它与视口宽度完全匹配，那么将需要一些Susy不知道如何处理的计算。

要使其成为移动优先和响应式，您需要构建移动设计，然后在最小宽度媒体查询中添加任何其他（平板电脑/桌面/等）样式。细节很大程度上取决于您要完成的任务。

作为旁注，您使用container()的方式并非意图。如果它对你有用，那很好 - 但看起来你经常覆盖输出。 container() mixin旨在根据container设置或列宽的总和为您提供设置的宽度。它还有助于clearfix和水平居中。看起来你单独使用它作为clearfix，并覆盖其他所有内容。我建议使用更简单的clearfix mixin。

如何用susy拉伸容器div外的嵌套div全宽？

1 个答案: