Question

我有一个令人尴尬的任务，即“改造”一个网站以便做出响应，并且已经获得了Zurb基础980px网格。我有点失去了我应该如何适应我现有的网站 - 我是否必须完全重新设计它以使元素与新网格对齐？据我所知，该网站将按比例缩放，在某些断点处会隐藏一些元素并为其他人加载新的css - 但这是我无法得到的网格？

Answer 1

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

首先，请确保您已引用项目中的所有基础资源（Javascripts和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>

您需要在所有网页上执行此操作。 请记住每个＆lt; row＆gt;必须只包含12列不少于

完成这项工作后，您应该顺利完成任务。由于您现在正在处理灵活的网格和灵活的内容，因此您可能会为您做一些额外的工作。

Answer 2

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

http://adapt.960.gs/

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

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

响应'网格'？

2 个答案: