html - 响应 'grid' ？

Question

我有一项令人羡慕的任务，即“改造”网站以使其响应，并获得了 Zurb foundation 980px 网格。我有点不知道应该如何使我现有的网站适合这个 - 我是否必须完全重新设计它以使元素与新网格对齐？我知道网站会按比例缩放，并且在某些断点处会隐藏一些元素并为其他元素加载新的 CSS - 但我不明白这是网格的东西吗？

Answer 1

到目前为止，我已经转换了两个 960gs 网站，而且速度都非常快。

对于初学者，请确保您已引用项目中的所有基础资源(Javascripts 和 CSS)。

首先，您提到您的网格是 960，而 zurb 的是 980。我们将完全定制。您需要做的是添加一个 CSS 覆盖。为此，请打开 app.css 并添加以下代码:

.row { max-width: 960px; }

接下来，您需要查看当前的 HTML 并了解它与 Zurb 的相似程度。在 960gs 中，没有行，只有列。所以在我的项目中，我需要添加行，并对列类进行查找和替换，如下所示:

之前:

<div class="container_12">
  <div class="grid_8">
          ...    
  </div>
  <div class="grid_4">
          ...
  </div>
</div>

之后:

<div class="container">
 <div class="row">
  <div class="eight columns">
          ...    
  </div>
  <div class="four columns">
          ...
  </div>
 </div>
</div>

您需要在所有页面上执行此操作。 请记住，每个 只能包含 12 列。

完成此操作后，您应该一切顺利。由于您现在要处理灵活的网格和灵活的内容，因此您可能需要完成一些额外的工作。