首页 文章

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

提问于
浏览 次
2

使用Zurb Foundation 4既可以提供小网格（适用于768px以下的屏幕）和大网格，也可以提供从.show / hide-for-small到.show / hide-for-xlarge的各种可见性类别 .

开发流畅的，非固定宽度的布局，开发人员可以选择使用网格或显示/隐藏dom元素，具体取决于屏幕大小 . 对于某些星座（例如，当屏幕尺寸减小时从4列切换到3列布局），可能需要更复杂的测量 . 示例可以是底层dom元素的结构转换或复制实际内容，并基于屏幕大小显示/隐藏相关结构 .

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

css zurb-foundation

1 回答

  • 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>
    回复于

相关问题