1.2 流式网格

流式网格是由两种技术组合而成的，一种是网页元素采用网格设计（Grid Design），另外一种是网页元素采用按照窗口大小缩放的流式布局（Liquid Layout）。

1.2.1 网格设计

响应式网页设计一开始会先使用网格设计来配置各个元素，并在确定各元素位置之后将最初的px单位修改为百分比单位，从而实现根据视口大小自动调整成适当的版面。除了设置百分比单位之外，还需要设置宽度的最大值与最小值，当宽度超过或低于某个限制值时可以固定版式，例如超过最大值后就固定为水平居中，两边留白。

在设计过程中，会使用<div>元素进行排版，实现方式主要有float和display：inline-block两种方式。

1．float（浮动）

如果使用float方式实现4个元素的浮动，当足够宽时，4个元素就会从左至右依次排列，如图1-2a所示；当外围宽度不断缩小时，页面也会发生变化，如图1-2b、c、d所示。

使用float:left布局的原理就是将元素浮动靠左排列，当超过容器最大宽度后，元素会自动挤到下一行。

2．display：inline-block

除了float方式外，也可以使用display:inline-block实现从左向右排列，只要把原本的float:left换成display:inline-block即可，同时也可以通过指定text-algin来指定文字的排列状态。

其实，float:left和display:inline-block各有优缺点，当float宽度不够时，区块会自动进入下一行，可能会与其他元素重叠，不过可以用clear来消除float的重叠；display:inline-block不存在这个问题，但是运行方式会比较像文字，像靠右、靠左对齐都是用text-align:left/right，但基本上区块还是以从左到右的“顺序”进行显示。

1.2.2 流式布局

第二种实现网格设计的技术是流式布局，主要就是通过把原本的px单位改成百分比单位来制作版面，使呈现的区块尺寸根据浏览器的状态进行动态调整，而不是以固定尺寸显示，参考语句如下。

在刚开始设计版面的时候用百分比单位来制作是有难度的，通常都是先使用固定的尺寸（px）来制作页面，规划完版面后再转换成相对比例（%）。

以“width: 400px;”为例，假设父元素的宽度为1000px，则使用百分比单位后代码应修改为“width:40%;”。