自製 Grid System - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

相关文章推荐

沉稳的键盘 · 单元测试源码分析之二Mockito自动装配和 ...· 7 月前 ·

冷静的油条 · java - static import ...· 1 年前 ·

旅行中的抽屉 · Windows 7 任务栏开发之 ...· 1 年前 ·

傲视众生的开水瓶 · 量化大时代 VNPY量化交易实战课程6天 ...· 1 年前 ·

今天在研究網站 RWD 框架，由於 Bootstrap 太大一包還在猶豫是否要引入，目前先手刻一套，分享給各位~

$breakpoint: 600px 900px 1200px 1800px
區分五種區間，代號分別為：xs, sm, md, lg, xl。
( 斷點參考 Alex宅幹嘛 )

外層 .gs ( grid system) 即為一列

每列設計為 12 欄

行內元素


    .col-尺寸代號-佔欄數

每一種區間，所有行內元素的佔欄數相加(或者等於) 12 為宜

行內元素若加上 .col ，最左欄、最右欄有除去 gutter(間距) 的效果

HTML 舉例如下：

<div class="gs">
  <div class="col col-xs-12 col-md-4 col-lg-2"></div>
  <div class="col col-xs-12 col-md-4 col-lg-8"></div>
  <div class="col col-xs-12 col-md-4 col-lg-2"></div>
$breakpoint: 600px 900px 1200px 1800px
  width: 100%
  display: flex
  flex-wrap: wrap
  // 最左欄、最右欄除去 gutter(間距) 效果
    padding: 5px
    &:first-child
      padding-left: 0
    &:last-child
      padding-right: 0
// 600px 以下
@media (max-width: nth($breakpoint, 1))
    &>.col-xs-1
      width: 100%/12
    &>.col-xs-2
      width: 100%/12 * 2
    &>.col-xs-3
      width: 100%/12 * 3
    &>.col-xs-4
      width: 100%/12 * 4
    &>.col-xs-5
      width: 100%/12 * 5
    &>.col-xs-6
      width: 100%/12 * 6
    &>.col-xs-7
      width: 100%/12 * 7
    &>.col-xs-8
      width: 100%/12 * 8
    &>.col-xs-9
      width: 100%/12 * 9
    &>.col-xs-10
      width: 100%/12 * 10
    &>.col-xs-11
      width: 100%/12 * 11
    &>.col-xs-12
      width: 100%/12 * 12
//600px - 900px
@media (min-width: nth($breakpoint, 1)) and (max-width: nth($breakpoint, 2))
    &>.col-sm-1
      width: 100%/12
    &>.col-sm-2
      width: 100%/12 * 2
    &>.col-sm-3
      width: 100%/12 * 3
    &>.col-sm-4
      width: 100%/12 * 4
    &>.col-sm-5
      width: 100%/12 * 5
    &>.col-sm-6
      width: 100%/12 * 6
    &>.col-sm-7
      width: 100%/12 * 7
    &>.col-sm-8
      width: 100%/12 * 8
    &>.col-sm-9
      width: 100%/12 * 9
    &>.col-sm-10
      width: 100%/12 * 10
    &>.col-sm-11
      width: 100%/12 * 11
    &>.col-sm-12
      width: 100%/12 * 12
//900px - 1200px
@media (min-width: nth($breakpoint, 2)) and (max-width: nth($breakpoint, 3))
    &>.col-md-1
      width: 100%/12
    &>.col-md-2
      width: 100%/12 * 2
    &>.col-md-3
      width: 100%/12 * 3
    &>.col-md-4
      width: 100%/12 * 4
    &>.col-md-5
      width: 100%/12 * 5
    &>.col-md-6
      width: 100%/12 * 6
    &>.col-md-7
      width: 100%/12 * 7
    &>.col-md-8
      width: 100%/12 * 8
    &>.col-md-9
      width: 100%/12 * 9
    &>.col-md-10
      width: 100%/12 * 10
    &>.col-md-11
      width: 100%/12 * 11
    &>.col-md-12
      width: 100%/12 * 12
//1200px - 1800px
@media (min-width: nth($breakpoint, 3)) and (max-width: nth($breakpoint, 4))
    &>.col-lg-1
      width: 100%/12
    &>.col-lg-2
      width: 100%/12 * 2
    &>.col-lg-3
      width: 100%/12 * 3
    &>.col-lg-4
      width: 100%/12 * 4
    &>.col-lg-5
      width: 100%/12 * 5
    &>.col-lg-6
      width: 100%/12 * 6
    &>.col-lg-7
      width: 100%/12 * 7
    &>.col-lg-8
      width: 100%/12 * 8
    &>.col-lg-9
      width: 100%/12 * 9
    &>.col-lg-10
      width: 100%/12 * 10
    &>.col-lg-11
      width: 100%/12 * 11
    &>.col-lg-12
      width: 100%/12 * 12
//1800px 以上
@media (min-width: nth($breakpoint, 4))
    &>.col-xl-1
      width: 100%/12
    &>.col-xl-2
      width: 100%/12 * 2
    &>.col-xl-3
      width: 100%/12 * 3
    &>.col-xl-4
      width: 100%/12 * 4
    &>.col-xl-5
      width: 100%/12 * 5
    &>.col-xl-6
      width: 100%/12 * 6
    &>.col-xl-7
      width: 100%/12 * 7
    &>.col-xl-8
      width: 100%/12 * 8
    &>.col-xl-9
      width: 100%/12 * 9
    &>.col-xl-10
      width: 100%/12 * 10
    &>.col-xl-11
      width: 100%/12 * 11
    &>.col-xl-12
      width: 100%/12 * 12
以上這段應該可以再優化，等想到再來更新~~