Section 10: Responsive Web Design

JavaScript
1

本章的目的，在對上一章所完成專業的網站進行 RWD 的實踐。

感想：如果 RWD 在後面的章節，沒有再次補充說明的話，這樣的介紹是不足的。

首先觀察一些 RWD 網頁的示範：

HTML5 UP! Responsive HTML5 and CSS3 Site Templates

RWD 原則：

  1. 能用 flexbox 處理，就用 flexbox 處理。

  2. 不能用 flexbox 處理，就用 media query 處理。

Part I

Desktop view 的 section.left & section.right，其中 section.right，在超過某寬度時，由網頁右側移至下側。（以下程式，標註 RWD 處）

main {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* RWD */

section.left {
  flex: 4 1 350px; /* RWD */
}

section.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 250px; /* RWD */
}
}

Part II

Google Chart

  1. 首先移除原來程式中，關於 curve_chart 的 style 設定。
-<div id="curve_chart" style="width: 750px; height: 450px"></div>
+<div id="curve_chart"></div>
  1. 接著用 css 來設定圖表寬高
#curve_chart {
  /* # ID selector */
  width: 100%;
  height: 80%;
}

如果在手機顯示時，圖表寬高比例不美觀，可以用 media query 來調整。

@media screen and (max-width: 550px) {
  #curve_chart {
    width: 100%;
    height: 30%;
  }
}

Part III

用 media query 來調整選單顯示，有兩種方式：

  1. 寬度逐漸縮小時，右側超過的選單，移至下一行。（本例使用解法）

  2. 寬度無法再顯示所有選單時，選單由橫向排列改為直向排列。

@media screen and (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }
}

Part IV

直接使用 Bootstrap 中，別人寫好的元件（一萬多行的各式功能 css），這些功能皆已實作 RWD。要在自己的專案中，使用 Bootstrap 的 CSS，只要幾個簡單步驟：

  1. 將 Bootstrap 的 bootstrap.min.css 載入 HTML 的 <head> 中，這只需要一行 code。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

參考資料：（以下為課程中所使用 4.5版的連結，目前最新版為 5.2）

  1. 瀏覽 Bootstrap 的 Components（網頁左側選單，由 Alerts 到 Tooltips 共 24 種分類），選擇你想使用的元件。
    課程中以 Jumbotron 為例，先給你觀看網頁的成果頁面，緊接著下方就是該網頁的程式碼，複製後貼到 HTML 中的 <body> 即可展示一模一樣的頁面。

參考資料：（以下為課程中所使用 4.5版的連結，目前最新版為 5.2）

  1. 然後針對你想修改的部分（如：文字敘述），直接修改即可。