Grids System-响应式流体布局

“栅格系统”最早出现于印刷，简单的说就是运用固定的纵隔使界面排列工整简洁。后来延续到web设计，其中比较有名的是960 Grid System。目的也无非让网页布局的更合理、更易于阅读。在做Tecno、Xclub项目时因为要做同时对每个页面做响应式设计，同时适配Phone、Pad、Pad横屏、笔电、宽屏Pc，所以如何更高效的做响应式设计一直是我在探究的一个问题。

经过大量页面的实践，结合Bootstrap和iView的栅格规范，总结出一套自己响应式的、移动设备优先的流体式栅格系统，它随着屏幕或视口（viewport）尺寸的增加，会自动分为最多12列。它包含了穿插于小范围缩放之间的媒体查询，通过创建关键的分界点阈值使得页面在任何尺寸的视窗下都能达到最佳和可预见的视觉效果。很大程度上保证了前端还原设计的质量。

现在将这套规范开发成具有更广泛适用性的工具，希望可以为以后的响应式布局提供参考和便利。

测试地址：http://niuniusoga.gotoip3.com/more/grid/