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