拼图开发文档

响应网络布局

响应网格布局是在网格系统的基础上，采用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*
响应效果总是水平排列水平排列，当屏幕小于这些阈值时堆叠在一起。

响应布局

如下示例，在大屏的情况下1行2列显示，大屏以下则以默认方式显示。

.big-x6
.big-x6
.big-x6
.big-x6
    <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>

多屏响应

1
2
3
4
5
6
7
8
9
10
11
12
    <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的轮回。

排序偏移嵌套

在响应的情况下，依旧可根据不同宽度响应不同的排序、偏移、嵌套方式。

排序

.x1
.x2
.x3
.x4
.x5
.x6
    <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排序。

水平偏移

.x11.big-x9.small-move1.big-move3
    <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格。

内嵌套

1-1
1-2
1
2-1
2-2
2-3
2 
    <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

响应间距示例

.x
.x
.x
    <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>
上述示例为默认为小间距，在大屏时为特大间距。

综合实例

根据网格系统及响应功能，实现综合布局：

1
2
3
    <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>
上述示例为间距、单元格宽根据屏从小到大的变化，大屏移动、排序等效果。