html - 响应式“网格”？

Question

我有一项令人羡慕的任务是“改造”一个网站以使其具有响应性，并获得了 Zurb 基础 980px 网格。我有点迷茫我应该如何让我现有的网站适应这个 - 我是否必须完全重新设计它以使元素与新网格对齐？我知道该站点将按比例缩放，并且在某些断点处将隐藏一些元素并为其他元素加载新的 CSS - 但这是我没有得到的网格？

Answer 1

到目前为止，我已经转换了两个 960gs 的网站，而且都运行得很快。

对于初学者，请确保您已经引用了项目中的所有基础资源（Javascript 和 CSS）。

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

.row { 最大宽度：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>

您需要在所有页面上执行此操作。请记住，每个 <row> 必须仅包含 12 列，不多不少。

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

Answer 2

您可以使用 960.gs 网站上的 Adapt.js 插件。

http://adapt.960.gs/

它已经与 960gs 兼容，因此您无需更改框架中的任何内容。

但是，您可能仍需要重新编码一些内部 CSS 类以适应流动性。