基础4媒体查询

Question

我是CSS设计的初学者。

我正在使用Foundation 4（Zurb）来设计我的大学项目的前端。我了解到，基金会4本质上是响应性的，以设计响应式设计。

是否需要使用Foundation 4进行CSS Media查询？如果是，那么我怎样才能使用它从中获得的好处呢？

Answer 1

您应该阅读文档的“媒体查询”和“网格”部分： http://foundation.zurb.com/docs/

<div class="row">
  <div id="block" class="small-2 large-8 columns">Content</div>
</div>

由于“small-2”类，此代码将使“#block”为每个屏幕大小2列宽。 'large-8'类覆盖窗口宽度为768px及以上的行为，使其在大屏幕上为8列宽。

为了简化，该代码将在手机屏幕上将“#block”呈现为2列宽，在桌面屏幕上呈现8列。

如果您需要IE6-8支持，您还需要使用Respond.js： https://github.com/scottjehl/Respond