经过了两天的学习与开发,终于是完成了自用框架的响应式排版模块,模块借鉴了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 } ...