网格系统

拼图框架内置一套响应式网格系统是，不同分辨率或设备可自动适应大小，使得页面在不同设备上都有良好的表现。

简介

网格系统用于通过一系列的行与格子的组合创建页面布局，将每行分成12个格式而形成网格系统。

• 行.line必须包含在.container中；当使用100%的页面宽度时，也可以包含在.container-layout中；
• 格式.x(*)必须包含在.line中；
• .x(*)可以随意组合，满行.line内的.x(*)数值的总和等于12；大于12则另起一行显示；
• 使用.line时，格子的间距为0px；也可以使用.line-small(4px)、.line-middle(10px)、.line-big(20px)来改变格子的间距。
• x：水平方向的格子；
• 数字(*)：包含格子的数量；
• l：手机-超小屏幕(little)；
• s：平板-小屏幕(small)；
• m：桌面-中屏幕(middle)；
• b：桌面宽屏-大屏幕(big)；

常规布局

常规布局即为非响应式布局，即为在任何屏幕格子比例上都一样的排列方式，不会随着屏幕不同而展示不同的布局。

水平移动

给例添加.x(*)-move样式，可以快速实现元素的水平方向移动。

内嵌套

大格子里面包含小格子，12个格子为一整行，超出则为换行。

格子排序

使用.x(*)-left和.x(*)-right样式，可以改变格子的排序显示。

跨屏响应式布局

跨屏响应式布局，分为两种方式，在支持CSS3的浏览器中，拼图采用的是媒体查询(media query)，当不支持css3的浏览器IE8时，拼图引入Respond.js来实现媒体查询。

媒体查询方式

超小屏幕(手机，小于 760px) 没有任何媒体查询相关的代码，因为这在 拼图 中是默认的
小屏幕(平板，大于等于 760px) @media (min-width: 760px) { ... }
中等屏幕(桌面显示器，大于等于 1000px) @media (min-width: 1000px) { ... }
大屏幕(宽屏显示器，大于等于 1200px) @media (min-width: 1200px) { ... }

跨屏响应参数

显示及隐藏

综合实例

手机、平板、桌面、大屏幕跨屏转换实例。