Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

回應式網頁設計模式

回應式網頁設計模式正在快速演化,但已有一些能跨桌面和行動裝置運作良好的既定模式

回應式網頁使用的大多數版面配置可以分成五大外觀設計模式:主體為流動 (mostly fluid)、欄內容下排 (column drop)、版面配置位移 (layout shifter)、微小調整 (tiny tweaks) 和畫布外空間利用 (off canvas)。

在某些情況下,網頁可能會使用不同模式組合,例如欄內容下排與畫布外空間利用。 最初是由 Luke Wroblewski 識別出來的這些模式,可為任何回應式網頁提供紮實的起點。

模式

若要建立簡單、容易理解的範例, 以下每個範例是以真正標記使用 flexbox建立 -- 通常是使用div包含於一主要容器中div的三個內容。 每個範例都是以最小檢視起頭撰寫, 而中斷點是在必要時加入。 就最新瀏覽器而言, 彈性方塊版面配置模式已廣受支援,儘管最佳化支援仍需要廠商首碼設定。

主體為流動

主體為流動模式主要包含一個流動網格。 在大型或中型螢幕上,它通常保持為相同的大小,只是會在較寬螢幕上調整邊界。

在小螢幕上, 流動網格會導致內容自動重排,而欄則是是垂直堆疊。 這種模式的一大主要優勢是它在小螢幕與大螢幕之間, 只需要一個中斷點。

嘗試一下

在最小的檢視中,每個內容 div 都垂直堆疊。 一旦螢幕寬度達到 600px, 主要內容 div 會保持在 width: 100%, 而次要 div 會在主要 div 下顯示為兩欄。 超過 800px 時, 容器 div 變成固定寬度,並在螢幕上居中。

使用這種模式的網站包括:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
  .c3, .c4, .c5 {
    width: 33.33%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

欄內容下排

針對全寬度多欄版面配置,視窗寬度之於內容變得太窄時,欄內容下排只是會垂直堆疊所有欄而已。

最後結果是所有欄會被垂直堆疊。 為這種版面配置模式選擇中斷點, 視內容而定,也會因每一種設計而變動。

嘗試一下

就像主體為流動的範例, 內容被垂直堆疊於最小檢視中,但在螢幕擴展超出 600px 時,主要與次要內容 div 會佔據整個螢幕寬度。 div 的順序是以舊 CSS 屬性來設定。 在 800px 時,所有三個內容 div 都會顯示,使用完整螢幕寬度。

使用這種模式的網站包括:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

版面配置位移

版面配置位移模式是最為回應式的模式,帶有跨數個螢幕寬度的多個中斷點。

這種版面配置的關鍵在於內容四處移動的方式, 而非自動重排或欄內容下排。 由於每個主要中斷點之間的顯著差異, 它的維護更複雜,並可能涉及元素內的變更, 而非整體的內容版面配置。

嘗試一下

以下的簡化範例會顯示版面配置位移模式。 在較小的螢幕上,內容會垂直堆疊, 但在螢幕變得較大時大幅變更,帶有一個左 div ,和兩個堆疊的 div 在右邊。

使用這種模式的網站包括:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

微小調整

微小調整只是對版面配置做出小小變更,例如調整字型大小 、調整影像大小,或小幅移動內容。

它適用於單欄版面配置,例如單網頁線性網站、大量文字 的文章。

嘗試一下

顧名思義,螢幕大小變更時,此範例也沒什麼變化。 螢幕寬度越大,字型和邊框間距也是如此。

使用這種模式的網站包括:

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 500px) {
  .c1 {
    padding: 20px;
    font-size: 1.5em;
  }
}

@media (min-width: 800px) {
  .c1 {
    padding: 40px;
    font-size: 2em;
  }
}

畫布外空間利用

它不會垂直堆疊內容,畫布外空間利用模式會將較不常用的內容 -- 可能是導覽或應用程式功能表 -- 放在螢幕外,當螢幕足夠大時才顯示,而且在較小的螢幕上,內容只需按一下就會顯示。

嘗試一下

不垂直堆疊內容,本範例使用一個 transform: translate(-250px, 0), 以將兩個內容 div 隱藏於螢幕之外。 透過新增一個開放類別給元素, 以使其可見,這裡使用了 JavaScript 來顯示 div。 在螢幕變更寬的同時, 螢幕外的定位會從元素移除,而元素會在可見檢視區中顯示。

注意在此範例中, iOS 6 版本 Safari 和 Android 瀏覽器不支援 flexboxflex-flow: row nowrap 功能,所以我們必須退回到絕對定位方式。

使用這種模式的網站包括:

body {
  overflow-x: hidden;
}

.container {
  display: block;
}

.c1, .c3 {
  position: absolute;
  width: 250px;
  height: 100%;

  /*
    This is a trick to improve performance on newer versions of Chrome
    #perfmatters
  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 

  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;

  z-index: 1;
}

.c1 {
  /*
  Using translate3d as a trick to improve performance on older versions of Chrome
  See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  #perfmatters
  */
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

.c2 {
  width: 100%;
  position: absolute;
}

.c3 {
  left: 100%;
}

.c1.open {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

.c3.open {
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

@media (min-width: 500px) {
  /* If the screen is wider then 500px, use Flexbox */
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .c1 {
    position: relative;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  .c2 {
    position: static;
  }
}

@media (min-width: 800px) {
  body {
    overflow-x: auto;
  }
  .c3 {
    position: relative;
    left: auto;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}