Hybrid前端框架开发日志#1-响应式排版模块

经过了两天的学习与开发，终于是完成了自用框架的响应式排版模块，模块借鉴了Bootstrap的排版系统，并且进行了修改与扩展，以2500px为分界点，添加了QHD系统的支持，编写了扩展类.col-hi-expand-*,在QHD显示模式下，将原有的12个column的排版模式扩展为了18个，对高分辨率浏览器提供了更加细致的控制途径,其他的细节功能有待完善…

.col-hi-1, .col-hi-2, .col-hi-3, .col-hi-4, .col-hi-5, .col-hi-6, .col-hi-7, .col-hi-8, .col-hi-9, .col-hi-10, .col-hi-11, .col-hi-12 {
    float: left;
  }
  .col-hi-expand-1, .col-hi-expand-2, .col-hi-expand-3, .col-hi-expand-4, .col-hi-expand-5, .col-hi-expand-6, .col-hi-expand-7, .col-hi-expand-8, .col-hi-expand-9, .col-hi-expand-10, .col-hi-expand-11, .col-hi-expand-12, .col-hi-expand-13, .col-hi-expand-14, .col-hi-expand-15, .col-hi-expand-16, .col-hi-expand-17, .col-hi-expand-18 {
    float: left
  }

  .col-hi-1 {
    width: $simple-col-1
  }

  .col-hi-2 {
    width: $simple-col-2
  }

  .col-hi-3 {
    width: $simple-col-3
  }

  .col-hi-4 {
    width: $simple-col-4
  }

  .col-hi-5 {
    width: $simple-col-5
  }

  .col-hi-6 {
    width: $simple-col-6
  }

  .col-hi-7 {
    width: $simple-col-7
  }

  .col-hi-8 {
    width: $simple-col-8
  }

  .col-hi-9 {
    width: $simple-col-9
  }

  .col-hi-10 {
    width: $simple-col-10
  }

  .col-hi-11 {
    width: $simple-col-11
  }

  .col-hi-12 {
    width: $simple-col-12
  }

  .col-hi-pull-0 {
    right: auto
  }

  .col-hi-pull-1 {
    right: $simple-col-1
  }

  .col-hi-pull-2 {
    right: $simple-col-2
  }

  .col-hi-pull-3 {
    right: $simple-col-3
  }

  .col-hi-pull-4 {
    right: $simple-col-4
  }

  .col-hi-pull-5 {
    right: $simple-col-5
  }
...