响应网络布局
响应网格布局是在网格系统的基础上,采用CSS3的媒体查询功能,实现不同的终端在水平方向响应显示不同的单元格数量。
媒体查询方式
框架通过媒体查询方式,实现响应网格布局,媒体查询的工作方式为:
默认
没有任何媒体查询相关的代码,拼图中默认的网格系统。
微小屏
屏宽大于等于576px时网格系统样式,通常为大屏手机或手机横屏,框架中定义的样式为.mini
-x1-x12。
@media (min-width: 576px) { ... }
小屏
屏宽大于等于768px时网格系统样式,通常为平板,框架中定义的样式为.small
-x1-x12。
@media (min-width: 768px) { ... }
中屏
屏宽大于等于1024px时网格系统样式,通常为笔记本电脑,框架中定义的样式为.middle
-x1-x12。
@media (min-width: 1024px) { ... }
大屏
屏宽大于等于1280px时网格系统样式,通常为桌面电脑或笔记本,框架中定义的样式为.big
-x1-x12。
@media (min-width: 1280px) { ... }
特大屏
屏宽大于等于1680px时网格系统样式,通常为桌面电脑,框架中定义的样式为.large
-x1-x12。
@media (min-width: 1680px) { ... }
响应布局参数
默认 | 微小屏 | 小屏 | 中屏 | 大屏 | 特大屏 | |
---|---|---|---|---|---|---|
屏宽 | 自动 | ≥576px | ≥768px | ≥1024px | ≥1280px | ≥1680px |
单元格样式 | .x* | .mini-x* | .small-x* | .middle-x* | .big-x* | .large-x* |
偏移样式 | .move* | .mini-move* | .small-move* | .middle-move* | .big-move* | .large-move* |
排序样式 | .order* | .mini-order* | .small-order* | .middle-order* | .big-order* | .large-order* |
响应效果 | 总是水平排列 | 水平排列,当屏幕小于这些阈值时堆叠在一起。 |
- .x*表示为数字1至12的单元格数。
- .move*表示为1至11偏移的单元格数。
- .order*表示为0至13的单元格排序数。
响应布局
如下示例,在大屏的情况下1行2列显示,大屏以下则以默认方式显示。
<div class="grid"> <div class="big-x6">.big-x6</div> <div class="big-x6">.big-x6</div> <div class="big-x6">.big-x6</div> <div class="big-x6">.big-x6</div> </div>
多屏响应
<div class="grid"> <div class="x1 mini-x4 small-x6 middle-x8 big-x10 large-x12">1</div> <div class="x2 mini-x5 small-x7 middle-x9 big-x11 large-x1">2</div> <div class="x3 mini-x6 small-x8 middle-x10 big-x12 large-x2">3</div> <div class="x4 mini-x7 small-x9 middle-x11 big-x1 large-x3">4</div> <div class="x5 mini-x8 small-x10 middle-x12 big-x2 large-x4">5</div> <div class="x6 mini-x9 small-x11 middle-x1 big-x3 large-x5">6</div> <div class="x7 mini-x10 small-x12 middle-x2 big-x4 large-x6">7</div> <div class="x8 mini-x11 small-x1 middle-x3 big-x5 large-x7">8</div> <div class="x9 mini-x12 small-x2 middle-x4 big-x6 large-x8">9</div> <div class="x10 mini-x1 small-x3 middle-x5 big-x7 large-x9">10</div> <div class="x11 mini-x2 small-x4 middle-x6 big-x8 large-x10">11</div> <div class="x12 mini-x3 small-x5 middle-x7 big-x9 large-x11">12</div> </div>
上述示例为默认单元格宽距为从1-12,微小屏从4-3,小屏从6-5,中屏从8-7,大屏从10-9,超大屏从12-11的轮回。
排序偏移嵌套
在响应的情况下,依旧可根据不同宽度响应不同的排序、偏移、嵌套方式。
排序
<div class="grid"> <div class="x1 small-order4 big-order3">.x1</div> <div class="x2 small-order5 big-order2">.x2</div> <div class="x3 small-order6 big-order1">.x3</div> <div class="x4 small-order1 big-order6">.x4</div> <div class="x5 small-order2 big-order5">.x5</div> <div class="x6 small-order3 big-order4">.x6</div> </div>
上述示例默认按1、2、3、4、5、6排序,小屏下按4、5、6、1、2、3排序,大屏下按3、2、1、6、5、4排序。
水平偏移
<div class="grid"> <div class="x11 big-x9 small-move1 big-move3">.x11.big-x9.small-move1.big-move3</div> </div>
上述示例为小屏显示11格偏移1格,大屏显示9格偏移3格。
内嵌套
<div class="grid"> <div class="x6 big-x5"> <div class="grid"> <div class="x3 big-x6">1-1</div> <div class="x9 big-x6">1-2</div> </div> 1 </div> <div class="x6 big-x7"> <div class="grid"> <div class="x3 big-x5">2-1</div> <div class="x4 big-x4">2-2</div> <div class="x5 big-x3">2-3</div> </div> 2 </div> </div>
上述示例第一层为默认按6、6分,大屏时按5、7分;内嵌1默认按3、9分,大屏时按6、6分;内嵌2默认按3、4、5分,大屏时按5、4、3分。
响应间距
根据不同的屏,响应不同的间距大小,命名方式为屏-grid
-尺寸:
默认 | 微小屏 | 小屏 | 中屏 | 大屏 | 特大屏 | |
---|---|---|---|---|---|---|
屏宽 | 自动 | ≥576px | ≥768px | ≥1024px | ≥1280px | ≥1680px |
微小间距 | .grid-mini | .mini-grid-mini | .small-grid-mini | .middle-grid-mini | .big-grid-mini | .large-grid-mini |
小间距 | .grid-small | .mini-grid-small | .small-grid-small | .middle-grid-small | .big-grid-small | .large-grid-small |
中间距 | .grid-middle | .mini-grid-middle | .small-grid-middle | .middle-grid-middle | .big-grid-middle | .large-grid-middle |
大间距 | .grid-big | .mini-grid-big | .small-grid-big | .middle-grid-big | .big-grid-big | .large-grid-big |
特大间距 | .grid-large | .mini-grid-large | .small-grid-large | .middle-grid-large | .big-grid-large | .large-grid-large |
响应间距示例
<div class="grid-small big-grid-large"> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> </div>
上述示例为默认为小间距,在大屏时为特大间距。
综合实例
根据网格系统及响应功能,实现综合布局:
<div class="mini-grid-mini small-grid-small middle-grid-middle big-grid-large large-grid-large"> <div class="grid"> <div class="x3 big-order3 mini-x4 small-x5">1</div> <div class="x4 big-order2 mini-x5 small-x3 middle-x3 big-move2 large-x3 large-move0">2</div> <div class="x5 big-order1 mini-x3 small-x4 middle-x2 big-x2 large-x4">3</div> </div> </div>
上述示例为间距、单元格宽根据屏从小到大的变化,大屏移动、排序等效果。