响应'网格'？

Question

我有一个不可改变的任务，即“改造”一个网站以作出响应，并且已经获得Zurb基金会980px网格。我有点失落，因为我应该如何适应我现有的网站 - 我是否必须完全重新设计它以将元素与新网格对齐？我知道该网站将按比例缩放，并在某些断点处隐藏一些元素并为其他人加载新的CSS - 但这是我没有得到的网格物体？

Answer 1

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

对于初学者，请确保您已经引用了项目中所有的基础资源（Javascript和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列不能少于。

一旦你完成了这一步，你应该很好。由于您现在正在处理灵活的网格和灵活的内容，因此您可能会为您剪掉一些额外的工作。

Answer 2

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

http://adapt.960.gs/

它已经与960gs兼容，所以你并不需要在框架改变什么。

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