真心歡樂。別怕，大家壹起面對並解決問題。其實，不同類型的設備及屏幕的這個問題，很早以前就開始存在了，只是多年來我們壹直忽視這個狀況，壹廂情願的守著960像素的網格系統。

如今，我們需要從設計流程的上遊改變長久以來的習慣，比如嘗試快速創建可以在不同設備上進行測試的原型，而不只是針對台式機浏覽器或筆記本。

Foundation是壹款開源的前端框架，我們可以使用它快速創建頁面原型。相比于其他同類型工具，Foundation的移動化方案更加出色；借鑒響應式Web設計的思路和方法，Foundation對內容結構在不同類型設備中的的呈現方式進行了相應的預設。

接下來，我們將通過壹個完整的實例，來演示怎樣使用Foundation快速創建跨平台的頁面原型。走著！

資源概覽

首先到foundation.zurb.com下載代碼包；果斷點擊大藍按鈕即可。代碼包中包含以下文件及結構：

1、index.html - 我們將從這裏開始創建第壹個頁面。

2、javascripts和stylesheets路徑 - 主要的靜態資源文件，包括jQuery及所需的樣式表。

3、humans.txt和robots.txt - 裏面的代碼算是不錯的樣板，有空的時候可以溜幾眼。

4、JS方面的東西基本不在本文討論範圍，我們繼續來看看stylesheets路徑中的文件：

1、global.css - 全局基礎樣式表，包括相對常規的12列固定寬度的網格系統、快速創建複雜布局的可嵌套工具等。另外還有其他全局字體、布局等方面的樣式定義。

2、ui.css - 用來對那些組成原型的常規UI元素進行樣式定義。

3、mobile.css - 負責移動設備方面的樣式，涉及響應式的樣式定義都在這裏。

分別在浏覽器和代碼編輯器中打開index.html文件。在浏覽器中，我們可以看到該頁面包含了壹些用于構築原型的基礎布局結構及UI元素。

接下來，我們將從網格系統、快速創建原型、移動化這三個方面依次進行實例講解。

網格系統

首先來簡單看看global.css中的網格系統。如果妳熟悉960網格系統或是Blueprint CSS框架，那麽對Foundation的網格結構也應該不會陌生。下面是壹段典型的結構代：

該結構由三部分組成：外層容器container、行容器row和列容器columns。外層容器的作用只是爲頁面添加左右內邊距(padding)。

行容器擁有壹個固定的最大寬度值，防止頁面在大顯示器中過寬；當然，如果妳想打造純粹的液態布局，也可以在樣式表中去掉這個屬性。

列容器是最內層的內容容器，在我們的網格系統中，每行最多可以放置12個列容器。上面的代碼中，我們創建的是典型的“內容+側邊欄”布局，寬度分別爲全寬的2/3和1/3。

網格布局可以進行嵌套：

Foundation官網中有壹些布局範例可以參考。