写在前面

黯羽轻扬首页是用伪绝对定位实现的24列960栅格，发现伪绝对定位和栅格布局简直是绝配，灵活性、自适应性、易用性都没得说。博客接着用960栅格，但需要支持移动阅读，自然就想到了media query，结果发现很容易去掉栅格（当然，都是伪绝对定位带来的好处）

一.伪绝对定位

出现伪绝对定位是因为绝对定位和浮动定位在栅格布局上都存在种种弊端

绝对定位栅格的缺点：

• 高度无法自适应

  position: absolute;后，元素就脱离了标准文档流，浏览器渲染时不再计算其高度，所以父元素会塌陷（高度无法自适应）

• 动态布局中无法使用

  如果存在非绝对定位的元素，那么它很难定位（无法确定(left, top)点有没有内容）

浮动定位栅格的缺点：

• 脆弱

  任何一个元素的width, margin, padding, border都会影响整个页面布局，只要宽度超出1px，行尾的元素都会被挤下去，然后下面所有行都完了。。精心拼凑的精确像素局部全碎了

伪绝对定位解决了这些问题，在栅格布局上非常好用，原理很简单：

1. 顶级容器定宽

   .body {
       overflow: hidden;   /* 让辅助定位的子容器不可见 */
       width: 950px;       /* 定宽 */
   }
   

2. 子容器浮动到顶级容器外，右边缘处

   .container {
       float: left;         /* 浮动 */
       position: relative;  /* 为第三步做准备 */
       width: 100%;         /* 给内容提供负边距参照 */
       left: 100%;          /* 出去 */
   }
   

3. 子容器的内容负边距，移回顶级容器区域

   /* 2列 100 : 850 */
   .content1 {
       margin-left: -950px;    /* 移回顶级容器区域 */
       width: 100px;
   }
   .content2 {
       margin-left: -850px;    /* 移回顶级容器区域 */
       width: 850px;
   }
   

子容器的内容可以撑起右侧看不见的子容器，所有2级容器能够撑起顶级容器，高度自适应了，定位依赖负边距，不依赖浮动定位，也就不存在牵一发而动全身的问题了

二.media query

media query实现响应式布局需要先解决2个问题：

1.media query条件

根据手机、平板、pc的宽度分别写media query？不用这么麻烦，比如960栅格在宽度大于960的设备上能够正常显示，在宽度小于960的设备上不能正常显示，我们只需要多写一套样式（max-width: 959px）就行，当然这里指的是设备物理像素，兼容性较好的做法如下：

1. html声明width为物理像素宽度

   <meta name="viewport" content="width=device-width, initial-scale=1" />
   

2. css方式声明width为物理像素宽度

   /* IE10+ */
   @-ms-viewport {
       width: device-width;
   }
   /* W3C标准 */
   @viewport {
       width: device-width;
   }
   

3. media query

   /* <=959 */
   @media screen and (max-width: 959px) {
   /*...*/
   }
   

2.去栅格

针对小屏设备的样式需要覆盖掉已经构筑好的栅格，理想的情况是有一个好用的reset，能够重置所有需要覆盖的样式。当然，这不可能，但去掉伪绝对定位实现的栅格很容易：

/* 顶级容器 */
.body {
    overflow: visible;
    width: auto;
}
/* 子容器 */
.container {
    float: nonr;
    position: static;
    width: auto;
    left: auto;
}
/* 内容 */
.content {
    margin-left: 0;
    width: auto;
}

把这些东西恢复默认值即可去栅格，这是很大的优势（如果是绝对定位栅格，去栅格的工作量想想都害怕。。）

三.Bootstrap栅格

Bootstrap也提供了响应式栅格，支持以下特性：

• 设备区分（col-xs、col-sm、col-md、col-lg）

• 列偏移

• 嵌套列（算是栅格布局本身的特点）

• 列排序（调整显示顺序与html声明的顺序不同）

Bootstrap用的不是伪绝对定位栅格，而是百分比布局

参考资料

• http://960.gs/：一万个栅格布局

• Bootstrap 栅格系统

• Faux Absolute Positioning：原版

• 伪绝对定位(译)：汉化版，推荐