门见山的说，作为网页设计和开发人员，我们面临着以下几个严峻的问题：

每天，人们用来上网的设备种类和数量都在不断上升。

为每种设备设计开发不同的界面是不可能的。

即使你专门为某些设备定制打造，这些设备也很有可能在不久的将来退出主流舞台。

真心欢乐。别怕，大家一起面对并解决问题。其实，不同类型的设备及屏幕的这个问题，很早以前就开始存在了，只是多年来我们一直忽视这个状况，一厢情愿的守着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官网中有一些布局范例可以参考。