Question

使用Zurb Foundation 4提供小网格（适用于768px以下的屏幕）和大网格，以及从.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列，并将其中一列扩展为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>

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

1 个答案: