Responsive Patterns: Layout

Responsive Patterns - Layout

Responsive Patterns 是一個蒐集響應式設計與實作的元件庫,舉凡 Layout、Navigation、Forms、Carousel、Tabs、Accordion 和 Lightbox 等皆有,很適合當成學習教材。先來玩玩 Layout 吧 - 分成這幾類:Reflowing、Equal Width、Off Canvas、Source-Order Shift、Lists 和 Grid Block。

Reflowing Layouts

Mostly Fluid

多欄位呈現,在大銀幕上有大的 margin,依賴 fluid grid(流動網格)、flexible images 來按銀幕比例縮放。當遇到小銀幕時,便將原先橫擺的 column 垂直擺放。

Responsive Patterns - Layout - Mostly Fluid

寫法很簡單,指定銀幕寬度大過某個範圍時,放置左右兩欄(Desktop/Tablet);否則(銀幕寬度小於特定範圍)都只是垂直擺放一欄(Mobile)。

HTML 的部份。

<div class="pattern">
  <div class="container">
    <div class="main">
      <h2>Main Content (1st)</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi.</p>
    </div>
    <div class="c2">
      <h3>Column (2nd)</h3>
      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
    </div>
    <div class="c3">
      <h3>Column (3rd)</h3>
      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
    </div>
  </div>
</div>

CSS(SCSS)的部份。

//預設垂直擺放一欄;銀幕寬度大過某個範圍時,放置左右兩欄

@media screen and (min-width: 768px) {
  .container {
    .c2, .c3 {
      float: left;
      width: 50%;
    }
  }
}

點此看 Demo

Column Drop

多欄位的 layout,銀幕大時,3個 column 平行排列;銀幕較小時,左邊 sidebar 移到頁面底端,只剩右邊 sidebar;最後銀幕更小時,3 個 column 垂直排列。

Responsive Patterns - Layout - Column Drop

使用 Media Query 針對不同銀幕寬度將區塊做調整。在切版的歷程中我很少使用「clear」的指令,因此還特別查了該怎麼使用 CSS clear Property。  

@media screen and (min-width: 768px) {
  .container {
    .main {
      width: 75%;
      float: left;
    }
    .c2 {
      width: 25%;
      float: left;
    }
    .c3 {
      clear: both; /* 不允許左右兩邊有 float element */
    }
  }
}

@media screen and (min-width: 992px) {
  .container {
    .main{
      width: 50%;
      margin-left: 25%;
    }
    .c2 {
      margin-left: -75%; /* 使用負值將 c2 移到左側 */
    }
      .c3{
        clear: none;
        /* 允許左右兩邊皆有 float element。
           不要使用「float: right」使 c3 往右靠,
           因為 container 寬度不足容納三個區塊,c3 會跑到右側底下。 */
      }
  }
}

點此看 Demo

Layout Shifter

Responsive Patterns - Layout - Layout Shifter

@media screen and (min-width: 768px) {
  .container {
      .main {
      width: 30%;
      float: left;
    }
    .c2, .c3 {
      width: 70%;
      float: right;
    }
  }
}

點此看 Demo

Tiny Tweaks

單一 Column,只是隨銀幕寬度調整標題與文字的大小與間距。

Responsive Patterns - Layout - Tiny Tweaks

HTML 的部份。

<div class="pattern">
  <div class="container">
    <div class="main">
      <h2>Main Content (1st)</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi.</p>
      <h3>Third-Level Heading</h3>
      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
      <h3>Third-Level Heading</h3>
      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
    </div>
  </div>
</div>

CSS(SCSS)的部份。

.container {
  width: 960px;
  margin: 0 auto;
  .main {
      h2 {
        font-size: 32px;
      }
      h3 {
        font-size: 20px;
      }
  }
}

@media screen and (min-width: 768px) {
  .container {
    .main {
      font-size: 120%;
      line-height: 1.5;
    }
  }
}

@media screen and (min-width: 992px) {
  .container {
    .main{
      font-size: 140%;
      line-height: 2;
    }
  }
}

點此看 Demo

Main Column with Sidebar

幾乎是最基本的排版方式 - 當銀幕夠寬時,側邊欄與主欄內容並排;當銀幕較小時,側邊欄在主欄之下。

Responsive Patterns - Layout - Main Column with Sidebar

@media screen and (min-width: 768px) {
  .container {
    .main {
      width: 66%;
      float: left;
    }
    .c2 {
      width: 34%;
      float: right;
    }
  }
}

點此看 Demo

3 Column

三欄式排版,中間為主要內容的區塊,左右兩邊為 sidebar。

Responsive Patterns - Layout - 3 column

@media screen and (min-width: 768px) {
  .container {
    .main {
      width: 50%;
      float: left;
      margin-left: 25%;
    }
    .c2 {
      width: 25%;
      float: left;
      margin-left: -75%;
    }
    .c3 {
      width: 25%;
      float: right;
    }
  }
}

點此看 Demo 1點此看 Demo 2

3 Columns Content Reflow

三欄式排版。

Responsive Patterns - Layout - 3 Columns Content Reflow

DemoSource Code

Equal Width

2 Equal-Width Columns

當銀幕較大時,可將區塊切分成 2 份(或 3、4、5 份等);當銀幕較小時再分區段垂直擺放。

Responsive Patterns - Layout - 2 Equal-Width Columns

// 當銀幕較大時,可將區塊切分成 2 份;當銀幕較小時再分區段垂直擺放。

@media screen and (min-width: 44em) {
  .col-group > div {
    float: left;
    width: 50%;
  }
}

點此看 Demo

Note - 3 Equal-Width Columns、4 Equal-Width Columns和5 Equal-Width Columns 實作方式與以上類似

Off Canvas

Top

在核心內容之上可放置導行列或其他內容,不需要的時候可以隱藏以節省空間。

Responsive Patterns - Layout - Off Canvas - Top

優點

缺點

點此看 Demo

Left

左邊有側邊欄,若銀幕夠大則顯示在畫面上;若銀幕較小則收納在左側。

Responsive Patterns - Layout - Off Canvas - Left

點此看 Demo

與「Off Canvas - Left」類似,只是將float: left換成float: right或絕對位置由 left 改為 right。

Responsive Patterns - Layout - Off Canvas - Right

點此看 Demo

Full Screen Overlay

上方的 Menu 可隱藏於可視範圍之外,以適用於小尺寸的銀幕。

Off Canvas - Full Screen Overlay

點此看 Demo - 這個範例有針對 js 停用的狀況做處理噢!

Source-Order Shift

Table Cell

利用 Table 的屬性改變元素的位置。如下範例程式碼,當銀幕寬度小於 640px 時,將原先在底下的.nav區塊利用display: table-caption移到畫面上方。

@media all and (min-width: 640px) {
  .t {
    display: table;
    caption-side: top;
    width: 100%;
  }
  .nav {
    display: table-caption;
    ol {
      display: table-row;
      li {
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
}

Responsive Patterns - Layout - Source-Order Shift - Table Cell

點此看 Demo

Lists

List with Thumbnails

利用<table>的特性排列格狀物件。

Responsive Patterns - List with Thumbnails

// 利用`<table>`的特性排列格狀物件
.list_with_thumbnails {
  .list {
    .item {
      background: #eee;
      border-bottom: 1px solid #ccc;
      display: table;
      border-collapse: collapse;
      .item-image {
        display: table-cell;
        vertical-align: middle;
        width: 30%;
        padding-right: 1em;
        .thumbnail {
          display: block;
          width: 100%;
        }
      }
      .item-text {
        display: table-cell;
        vertical-align: middle;
        width: 70%;
      }
    }
  }
}

// 根據銀幕大小調整元件比例
@media all and (min-width: 45em) {
  .list {
    .item {
      float: left;
      width: 50%;
    }
  }
}

@media all and (min-width: 75em) {
  .list {
    .item {
       width: 33.33333%;
    }
  }
}

點此看 Demo 1點此看 Demo 2點此看 Demo 3(小銀幕時隱藏部份內容)

Grid Block

4-Up Grid Block

在銀幕寬度許可下,一列呈現四個物件;銀幕較小的狀況下,垂直排列一列放 2 個或 1 個物件。

Responsive Patterns - 4-Up Grid Block

物件也可以有不同的寬度,例如物件 #2。

Responsive Patterns - 4-Up Grid Block - Wide

// 在不同銀幕大小下調整物件的寬度
@media all and (min-width: 27em) {
  .grid {
    li{
      width: 50%;
      float: left;
    }
  }
}

@media all and (min-width: 40em) {
  .grid {
    li{
      width: 33.3333333%;
      &.wide {
          width: 66.666666%;
      }
    }
  }
}

@media all and (min-width: 60em) {
  .grid {
    li {
      width: 25%;
      &.wide {
          width: 50%;
      }
    }
  }
}

點此看 Demo 1,點此看 Demo 2點此看 Demo 3點此看 Demo 4點此看 Demo 5點此看 Demo 6

看到這裡的時候剛好朋友在討論 Layout Patterns 何其多,為何使用 Grid System 排版?遇到複雜的版面的時候,使用 Media Query 一個區塊一個區塊調整是辛苦且不容易 Debug 的,如果可以有系統的規劃版面與實作真是可以節省時間和精力。

推薦閱讀


這篇文章的原始位置在這裡-Responsive Patterns: Layout

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus