Foundation - 根据 Foundation 断点重新组织块答案

【问题标题】：Foundation - Reorganize blocks according to Foundation breakpointsFoundation - 根据 Foundation 断点重新组织块
【发布时间】：2014-07-09 03:16:21
【问题描述】：

这是我正在尝试做的粗略缩放：

如你所见，我想对我的三个块做几个“组织”：

在大屏幕（和更大）上，我希望它们彼此相邻
在中屏幕上，我希望第一个和第三个块在同一行，第二个块在另一行
在小屏幕上，我希望它们彼此下方

所以，问题出现在 medium 屏幕上，第三块需要在第二块之前。

为了解决它，我把第三块放了两次：

第一个块和第二个块之间的一个（使用类规则“show-for-medium-only”）
第二个块之后的另一个（使用类规则“hide-for-medium-only”）

这给了我这个 html（你可以看到它在运行here）：

<div class="row">
    <div class="small-12 medium-4 large-3 columns">
        <div class="panel">
            1
        </div>
    </div>

    <div class="show-for-medium-only medium-8 columns">
        <div class="panel">
            3
        </div>
    </div>

    <div class="small-12 medium-12 large-5 columns">
        <div class="panel">
            2
        </div>
    </div>

    <div class="hide-for-medium-only small-12 large-4 columns">
        <div class="panel">
            3
        </div>
    </div>
</div>

所以我的问题是：有没有办法在不复制第三块的情况下做到这一点？（不使用 JavaScript，最好使用原生 Foundation 规则）

【问题讨论】：

不幸的是，如果不使用 JavaScript，就无法做到这一点。如果您复制的 div 中没有太多内容，您解决它的方法可能是最好的。
您好，似乎最好的方法是利用 Foundation CSS 中的 @media (min-width) 块。首先找到平板电脑的宽度，并在其中切换可见性级别，有效地让您只制作一个 html 块
。你可能想为这个 div 定义一个特定的标签，因为它只会帮助在 css 中识别它。
基础网格允许您在foundation.zurb.com/docs/components/grid.html#source-ordering 周围推拉东西

标签： html css responsive-design zurb-foundation

【解决方案1】：

您可以使用source-ordering 或从文档流中删除元素并使用 css 和一些 html 样板对它们进行分层排序：

http://jsfiddle.net/uw8U8/

html:

<div class="wrapper">
   <div class="row layer-1">
      <div class="small-12 medium-4 large-3 columns">
         <div class="panel first">
            1
         </div>
      </div>
      <div class="small-12 medium-8 large-4 large-offset-5 third-column  columns">
         <div class="panel dummy"></div>
         <div class="panel dummy"></div>
         <div class="panel third">
            3
         </div>
      </div>
   </div>
   <div class="row layer-2">
      <div class=" medium-12 large-5 large-offset-3 columns">
         <div class="panel second">
            2
         </div>
      </div>
   </div>
</div>

和 app.scss

@import "settings";
@import "foundation";


.wrapper{
    position: relative;
    margin: auto;
    max-width: $row-width;
}

.panel{
    text-align: center;
    height: 1.5em;
    font-size: 1000%;
    color: white;
}

.first{
    background-color:#e64433;
}
.second{
    background-color:#09afb9; 
}
.third{
    background-color:#ed9a24; 
}


@media #{$large-up} {
    .layer-1, .layer-2{
        position: absolute;
    }
}

.dummy{
    display: none;
}
@media #{$small-only} {
    .third-column{
        position: absolute;
    }
    .dummy{
        display: block;
        visibility: hidden;
    }

}

或默认 Foundation 5 设置的 css 输出：

.wrapper {
  position: relative;
  margin: auto;
  max-width: 62.5rem;
}

/* line 11, ../scss/app.scss */
.panel {
  text-align: center;
  height: 1.5em;
  font-size: 1000%;
  color: white;
}

/* line 18, ../scss/app.scss */
.first {
  background-color: #e64433;
}

/* line 21, ../scss/app.scss */
.second {
  background-color: #09afb9;
}

/* line 24, ../scss/app.scss */
.third {
  background-color: #ed9a24;
}

@media only screen and (min-width: 64.063em) {
  /* line 30, ../scss/app.scss */
  .layer-1, .layer-2 {
    position: absolute;
  }
}
/* line 35, ../scss/app.scss */
.dummy {
  display: none;
}

@media only screen and (max-width: 40em) {
  /* line 39, ../scss/app.scss */
  .third-column {
    position: absolute;
  }

  /* line 42, ../scss/app.scss */
  .dummy {
    display: block;
    visibility: hidden;
  }
}

【讨论】：

【解决方案2】：

并不是一个真正面向 Foundation 的答案，但随着 display: grid; 得到广泛支持，这个解决方案应该适用于任何 CSS 框架，并且会使 HTML 更加简洁，CSS 更加灵活?（这样做，您还可以保持HTML 文档的样式，这是一个很好的做法，并且更好的可维护性?）

这个想法是重新创建一个由 12 列组成的网格：

  display: grid;
  grid-template-columns: repeat(12, 1fr);

然后使用 :

在相应数量的列上跨越我们的面板

  grid-column: span {{ number of column }};

这给了我们这个：

html, body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 1fr = 1 column */
  grid-gap: 20px; /* gutter beetween each column and row */
  margin: 20px;
}
.panel {
  height: 180px;
  line-height: 180px;
  text-align: center;
  font-size: 50px;
  font-family: Impact, sans-serif;
  color: #fff;
}

/* large screen */
.panel:nth-child(1) {
  grid-column: span 3; /* 3 columns */
  background-color: #e64433;
}
.panel:nth-child(2) {
  grid-column: span 5; /* 5 columns */
  background-color: #09afb9;
}
.panel:nth-child(3) {
  grid-column: span 4;  /* 4 columns */
  background-color: #ed9a24;
}

/* medium screen */
@media (max-width: 1000px) {
  .panel:nth-child(1) {
    order: 1;
    grid-column: span 4;
  }
  .panel:nth-child(2) {
    order: 3;
    grid-column: span 12;
  }
  .panel:nth-child(3) {
    order: 2;
    grid-column: span 8;
  }
}

/* small screen */
@media (max-width: 600px) {
  .panel:nth-child(1) {
    order: 1;
    grid-column: span 12;
  }
  .panel:nth-child(2) {
    order: 2;
    grid-column: span 12;
  }
  .panel:nth-child(3) {
    order: 3;
    grid-column: span 12;
  }
}

<div class="grid">
  <div class="panel">
    1
  </div>
  <div class="panel">
    2
  </div>
  <div class="panel">
    3
  </div>
</div>

您也可以考虑grid-template 和grid-area，乍一看有点难以理解，但可以根据您的需要让您更有创意

结果如下：

html, body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template: "pannel1 pannel2 pannel3" auto / 3fr 5fr 4fr;
  grid-gap: 20px;
  margin: 20px;
}
.panel {
  height: 180px;
  line-height: 180px;
  text-align: center;
  font-size: 50px;
  font-family: Impact, sans-serif;
  color: #fff;
}

/* large screen */
.panel:nth-child(1) {
  grid-area: pannel1;
  background-color: #e64433;
}
.panel:nth-child(2) {
  grid-area: pannel2;
  background-color: #09afb9;
}
.panel:nth-child(3) {
  grid-area: pannel3;
  background-color: #ed9a24;
}

/* medium screen */
@media (max-width: 1000px) {
  .grid {
    grid-template:
      "pannel1 pannel3" auto
      "pannel2 pannel2" auto / 1fr 2fr;
  }
}

/* small screen */
@media (max-width: 600px) {
  .grid {
    grid-template:
      "pannel1" auto
      "pannel2" auto
      "pannel3" auto / 1fr;
  }
}

<div class="grid">
  <div class="panel">
    1
  </div>
  <div class="panel">
    2
  </div>
  <div class="panel">
    3
  </div>
</div>

请注意，上述解决方案保留了原始文档流，这意味着，如果您想通过页面的可聚焦元素“Tab”，它总是会在第三个面板之前转到第二个面板，即使您会预计在中等屏幕上的第二个面板之前进入第三个面板。

如果这对您来说是个问题，您将需要 JS 来自动更新面板上的 tabindex 属性，或者在 HTML DOM 本身中重新排序元素，如果使用 JS 不是您的解决方案，那么我猜原始帖子中的代码示例是唯一的方法。

但请记住，根据屏幕大小重新排列 DOM 中的项目可能并不总是可访问性的好主意：

在视觉上重新排列网格项目不会影响顺序导航模式的默认遍历顺序（例如循环浏览链接）。
[CSS Grid Layout and Accessibility]

【讨论】：