响应式设计

在谈论栅格系统之前，我们先了解一下，响应式设计。简单来说，我们在设计的页面的时候，并不知道我们的页面会在什么设备呈现，为了在不同的设备上有最好的呈现效果，我们需要作出一些响应和调整。

响应式 Web 设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

响应式设计有几个比较重要的点，包括：

viewport：让页面宽度等于设备宽度

流式布局：百分比和浮动

@media：断点

栅格系统

为了能够更好的使用响应式设计，栅格系统应运而生。通过栅格系统，可以在切分的网格里按顺序叠加不同的宽度，并且易于管理。这样做的好处是显而易见的：

提高生产力，通过在网格的划分，元素更容易堆放而且在跨浏览器上面具有一致性，使我们可以专心的注意布局而不是兼容上。

具有灵活性，无论是什么样的布局，都可以拆分到粒度为一个网格的大小。

支持响应式设计，栅格系统本身能很好的和响应式设计结合在一起，或者说，我们的栅格系统是基于响应式设计的。

栅格系统的实现

grid-elements.png

Container

container.png

一个用于摆放栅格系统的容器。通常我们希望这个容器占满整个整个页面，除非显示设备特别大，这个时候定一个最大宽度，则

.container {

width: 100%;

max-width : 1200px;

}

Row

row.png

用于防止里面的列( column )溢出到其他的行。通常会需要清除浮动，因为我们是通过浮动来制作栅格系统的。

.row:before,

.row:after {

content: "";

display: table;

clear: both;

}

Column

column.png

栅格系统的核心，规定了列的宽度，位置和间隔。而在此之前，我们需要规定所有的盒子模型为 border-box 类型，这样做的原因是避免繁琐的计算和更简单的分列。(当然你也可以让页面上所有的盒子模型都设置为 border-box。)

.container * {

box-sizing: border-box

}

这里我们把每一行分成 6 列，通过将其设置为浮动且百分比，能够很好的制作响应式页面。

[class *= 'col-'] {

float: left;

min-height: 1px;

padding: 12px; /* 设置间距 */

}

.col-1 { width: 16.66%; }

.col-2 { width: 33.33%; }

.col-3 { width: 50%; }

.col-4 { width: 66.664%; }

.col-5 { width: 83.33%; }

.col-6 { width: 100%; }

Responsive

到此为止，我们的栅格系统已经设置的差不多了，为了支持响应式设计，参考 boostrap 的设置，我们可以给不同列设置不同的断点，这里以实现 md 和 sm 两种界限为例子：

@media all and (min-width: 769px) {

.col-md-1 { width: 16.66%; }

.col-md-2 { width: 33.33%; }

.col-md-3 { width: 50%; }

.col-md-4 { width: 66.664%; }

.col-md-5 { width: 83.33%; }

.col-md-6 { width: 100%; }

}

@media all and (max-width: 768px) {

.col-sm-1 { width: 16.66%; }

.col-sm-2 { width: 33.33%; }

.col-sm-3 { width: 50%; }

.col-sm-4 { width: 66.664%; }

.col-sm-5 { width: 83.33%; }

.col-sm-6 { width: 100%; }

}

参考