css - 是否有在流体模式下使用 Zurb Foundation 网格的最佳实践？

Question

使用 Zurb Foundation 4 提供小网格(适用于 768 像素以下的屏幕)和大网格，以及从 .show/hide-for-small 到 .show/hide-for-xlarge 的各种可见性等级。

开发流动的、非固定宽度的布局时，开发人员可以选择使用网格或根据屏幕尺寸显示/隐藏 dom 元素。对于某些布局(例如，当屏幕尺寸减小时从 4 列布局切换到 3 列布局)，可能需要更复杂的度量。示例可以是底层 dom 元素的结构转换或复制实际内容并根据屏幕尺寸显示/隐藏相关结构。

我的问题是什么/如果有在流体模式下使用 Zurb Foundation 网格的最佳实践？

Answer 1

我不确定 Zurb Foundation 中的流体模式是什么意思。

关于从大型布局到移动设备从 4 列布局切换到 3 列布局，我总是将可见性类放在行中。

<div class="row hide-for-small">
  <div class="large-3 columns"></div>
  <div class="large-3 columns"></div>
  <div class="large-3 columns"></div>
  <div class="large-3 columns"></div>
</div>

<div class="row hide-for-medium-up">
  <div class="small-4 columns"></div>
  <div class="small-4 columns"></div>
  <div class="small-4 columns"></div>
</div>

否则正常行为是堆叠。您可以从 4 列变为 3 列，并将其中一列拉伸(stretch) 12 宽，如下所示:

<div class="row">
  <div class="large-3 small-4 columns">Lorem ipsum dolor sit amet.</div>
  <div class="large-3 small-4 columns">Eius, ex vitae consequuntur nulla!</div>
  <div class="large-3 small-4 columns">Ipsam, assumenda ex non architecto.</div>
  <div class="large-3 small-12 columns">Tempore ipsa provident deserunt vel.</div>
</div>

或

<div class="row">
  <div class="large-3 small-12 columns">Tempore ipsa provident deserunt vel.</div>
  <div class="large-3 small-4 columns">Lorem ipsum dolor sit amet.</div>
  <div class="large-3 small-4 columns">Eius, ex vitae consequuntur nulla!</div>
  <div class="large-3 small-4 columns">Ipsam, assumenda ex non architecto.</div>
</div>