響應'網格'？

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類來適應流動性。