วิธีที่เหมาะสมในการสลับการตั้งค่ากริดในเบรกพอยต์

ฉันกำลังพยายามกำหนดพฤติกรรมเริ่มต้นบางอย่างสำหรับกริด จากนั้นแทนที่พฤติกรรมเหล่านั้นที่เบรกพอยต์เฉพาะ ในตัวอย่างต่อไปนี้ ฉันต้องการให้ div สองตัวซ้อนกัน โดยแก้ไขการตั้งค่า gutter เล็กน้อยจากค่าเริ่มต้น จากนั้นที่ 800px ขึ้นไป ฉันต้องการให้ div ซ้อนกันติดกัน ส่วนที่สองไม่เกิดขึ้น ดูเหมือนว่าการตั้งค่าระยะขอบบางอย่างจากสถานการณ์ที่น้อยกว่า 800px กำลังถูกนำไปใช้กับสถานการณ์ที่มากกว่า 800px โปรดแจ้งให้เราทราบวิธีเขียนโค้ดนี้และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดของ Susy

HTML:

<div class="container">
    <div class="primary">
        <p>I am Primary</p>
    </div>
    <div class="secondary">
        <p>I am Secondary</p>
    </div>
</div>

เอสซีเอสเอส:

$susy:
(
  flow: ltr,
  output: float,
  math: fluid,
  column-width: false,
  container: 1200px,
  container-position: center,
  last-flow: to, columns: 12,
  gutters: 1 / 4,
  gutter-position: after,
  global-box-sizing: border-box,
  debug: (
    image: hide,
    color: rgba(#66f, 0.25),
    spot: background, toggle: bottom right)
  );

* {
    @include box-sizing(border-box);
}

.container{
    @include container;
}

.primary{
    background-color: red;
}

.secondary{
    background-color: blue;
}

// Mobile first layout with slightly different
// gutter settings from default
@include with-layout(12 0.5 split){

    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}

// this layout should take over at 800px and above
// and share a row but instead boxes end up on different
// rows
@include susy-breakpoint(800px, $susy)
{
    .primary{
        @include span(first 6);
    }

    .secondary{
        @include span(last 6);
    }
}

ฉันยังได้สร้างตัวอย่าง codepen ที่สามารถพบได้ที่นี่:

http://codepen.io/sbonham/pen/vLKvMJ


css responsive-design sass breakpoint-sass susy-sass
person sbham    schedule 22.12.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
0
arrow_downward

ใช่แล้ว Susy เพิ่งเขียนค่า CSS ดังนั้นคุณต้องจัดการสิ่งนี้ในลักษณะเดียวกับที่คุณทำกับ CSS ธรรมดา Susy ไม่ทราบ DOM ของคุณ ดังนั้นจึงไม่มีทางรู้ได้ว่าคุณต้องการแทนที่ค่าที่คุณตั้งไว้ก่อนหน้านี้ หากเราถือว่าคุณ เสมอ ต้องการแทนที่ เราจะต้องส่งออกโค้ดที่มีจำนวนมาก

มีสองวิธีที่นี่:

  • วางเค้าโครงหน้าจอขนาดเล็กของคุณไว้ใน max-width media-query เพื่อไม่ให้ส่งผลต่อหน้าจอขนาดใหญ่
  • หรือ: แทนที่ค่าส่วนกลางเหล่านั้นภายในคิวรีสื่อหน้าจอขนาดใหญ่ ปัญหาที่ต้องแก้ไขคือระยะขอบพิเศษที่เพิ่มโดยรางน้ำ split เริ่มต้นของคุณ

ฉันชอบวิธีแก้ปัญหาแรกมากกว่า เพราะฉันคิดว่าการแทนที่นั้นน่าเกลียด แต่หากคุณกำลังเผชิญกับเบราว์เซอร์ขนาดเล็กบางตัวที่ไม่รองรับการสืบค้นสื่อ (ยังมีอยู่หรือไม่) คุณจะต้องใช้วิธีแก้ไขปัญหาที่สอง พยายาม:

@include susy-breakpoint(max-width 800px, 12 0.5 split) {
    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}
person Miriam Suzanne    schedule 23.12.2015

arrow_upward
0
arrow_downward

ดูเหมือนว่าจะเป็นการแฮ็ก แต่หวังว่าคุณจะได้ประโยชน์จากสิ่งนี้! ฉันเพิ่มสิ่งต่อไปนี้ใน codepen ของคุณ:

.primary, .secondary {
  display: inline-block;
  margin: gutter(12);
  width: span(12);
  width:500px;
}

http://codepen.io/alexG53090/pen/wMWNzR

person alex bennett    schedule 23.12.2015