网格系统（Foundation/Bootstrap）

Foundation网格系统:

small	手机端
medium	平板设备
large	桌面设备：笔记本，台式机
最后加入“columns”

 

 

 

 

 

 

水平堆叠： 

PC/平板：水平平铺，移动设备：水平堆叠；

<div class="medium-6 columns"></div>

PS：要保证数列加起来是12列，这是以移动设备为优先的响应式框架

混合模式：

<div class="small-12 medium-6 large-4 columns"></div>

块状网格：

<ul class="small-block-grid-3"></ul>

在移动设备是三数量；

不同设备不同数量：

<ul class="small-block-grid-2  medium-block-grid-4 large-block-grid-6 columns"></ul>

 

small | medium | large-pull-*	修改列的顺序
small-*	小屏幕和大屏幕宽度一样
small | medium | large-centerd	居中
small | medium | large-offset-*	列偏移量(向右移）
medium-3 columns end	不完整列(向左浮动）

 

 

 

 

 

 

---

Bootstrap网格系统:

col-	针对所有设备
col-sm-	平板	>=576px
col-md-	桌面显示器	>=768px
col-lg-	大桌面显示器	>=992px
col-xl-	超大桌面显示器	>=1200px

 

 

 

 

 

 

col-sm-3	等宽响应式
col-sm-4;col-sm-8	不等宽
col-sm-3 col-md-6 col-lg-4 col-xl-2	混合模式
offset-*-*(col-md-3 offset-md-3)	偏移列
移动设备上，既屏幕小于576px,呈现堆叠