960网格系统已经存在了一段时间，并且已经证明可以被快速应用到新项目中进行使用。该框架很简单易学，只需经历快速的学习曲线后就可以上手了。
960网格系统的唯一问题是它不是响应式的。事实上，它更像一个表格，其列跨越固定宽度的表头。它在960px宽的窗口中布局最完美，这就是它的特点，而你不得不忍受良好的布局只能呈现在一个特定窗口尺寸中。那为什么还要在一本关于响应式设计的书中讨论这个960网格框架呢？答案是一些人很喜欢使用这个网格系统，他们决定解决这个只能适应单一窗口尺寸的问题。
准备工作
有很多好的方案可以解决这个问题，希望你能在本章中发现它们。慢慢来，本节中会介绍这些方法中最简单的一个。实际上，简单的响应式960网格系统可以描述为一个流式网格。它使用了百分比宽度、左浮动元素替代了固定宽度的网格元素。该版本大多数情况都能良好工作，但是当列变得很狭窄时，阅读会变得很困难。可以使用额外的CSS来轻松解决这个问题。
我们最终希望页面能够根据屏幕改变而自适应，而这需要对网格更细粒度的控制。
首先，从
www.designinfluences.com/fluid960gs/找到流式960网格系统。然后下载并解压缩存档文件。从存档文件的CSS文件夹中将grid.css文件复制到项目的CSS文件夹中。接下来，在项目的CSS目录中创建一个名为responsive.css的新CSS文件。稍后将会使用该文件。
实现方式
在IDE中创建一个新的HTML文件。添加对grid.css及responsive.css样式文件的引用链接。
接下来需要在HTML body元素中添
加一些内容。为了使流式960网格能够工作，需要添加一个div元素，为其添加一个类用于定义拥有的列数量。本节中使用containter_16类，总共有16个可用的列。当然也可以分配containter_12类给该div元素，这样可用列的数量就会变为12。
在container_16元素中，先为标题创建一个容器，即创建一个新的div元素并为其分配grid_16类。你可能会猜grid_16类占据container_16元素的全部宽度。这是个相当不错的猜测，你对了98%。它实际上占据了98%的宽度，总宽度是全部16列再加2%的外边距。如果你改用grid_11类，它将占据11列，即66.75%宽度，另外有2%宽度用于外边距。
们再添加一个div元素来创建一个新行，这次设置class值clear。这个div元素的效果类似于在键盘上按下回车键，或者在一些编程语言中的换行符（\n）。在行间添加clear元素可以对不同的行进加一些内容。为了使流式960网格能够工作，需要添加一个div元素，为其添加一个类用于定义拥有的列数量。本节中使用containter_16类，总共有16个可用的列。当然也可以分配containter_12类给该div元素，这样可用列的数量就会变为12。
在container_16元素中，先为标题创建一个容器，即创建一个新的div元素并为其分配grid_16类。你可能会猜grid_16类占据container_16元素的全部宽度。这是个相当不错的猜测，你对了98%。它实际上占据了98%的宽度，总宽度是全部16列再加2%的外边距。如果你改用grid_11类，它将占据11列，即66.75%宽度，另外有2%宽度用于外边距。
我们再添加一个div元素来创建一个新行，这次设置class值clear。这个div元素的效果类似于在键盘上按下回车键，或者在一些编程语言中的换行符（\n）。在行间添加clear元素可以对不同的行进行分隔，因为clear元素的位置被设置为left:float属性，并不占用垂直空间。
也可以用一个简单的换行标签来实现相同的效果，如下所示：
只需在每行之间添加clear div元素或换行标签就可实现换行效果。
现在把注意力放在内容上。在clear元素下添加6个新的div元素。给第一个元素分配class值grid_3，第二个元素分配grid_5，其余的分配grid_2。顺序无所谓，直到grid_*数字总和为16。在这些div元素中添加一些Insum填充文本（lipsum.com）。代码如下：
在下面的截图中你可以看到流式网格如何适应较小的视窗。
下一步是设置CSS，给流式布局添加一些响应式特性。在IDE中打开responsive.css文件进行编辑。添加媒介查询来覆盖1024px、600px、420px这几个屏幕断点，代码如下：
我们的目的是使用新的CSS来重写流式网格的样式，为内容元素创建一些更友好的新断点。对于较窄的宽度要设置更大的百分比宽度或一个固定宽度。
添加一个新的类.break-column到媒介查询中来重写现有的样式。
接下来在max-width:420px媒介查询中，为.break-column类添加样式min-width:360px。然后在max-width:600px及min-width:421px的媒介查询中，为.grid_2.break-column、.grid_3.break-column和.grid_5.break-column类设置属性值width:48%。然后在max-width:1024px媒介查询中，添加属性为width:30%的类，并紧跟着一个!important的重载（确保将其插入在分号前），如下面的代码所示：
创建响应式的流式网格只差最后一步了！再次打开HTML文件，给6个div元素都添加值为break-column的类。然后本方法就大功告成。你可以刷新浏览器或打开HTML查看效果。当缩小浏览器窗口或在移动设备上查看该HTML文件时，将会看到针对较小视图进行了优化的响应式布局。效果参见以下截图。
工作原理
如果在浏览器中打开使用了非响应式流式网格的HTML文件，当浏览器窗口或设备变小时，页面中的6列会保持相同比例。当在小窗口或移动设备中查看时，将会显示6个可读性不好的窄列。
通过添加媒介查询来重载div元素的样式属性，从而得到响应式效果。本节总共演示了三种方法来实现重载。第一种，使用min-width方法重载百分比宽度；第二种，在grid.css文件之后加载responsive.css文件，并且responsive.css中的CSS使用了显式命名空间（.grid_2.break-column、.grid_3.break-column和.grid_5.break-column），这重载了grid.css文件中声明的流式宽度；最后一种，使用!important声明提升重载等级。
京公网安备11011402054166
