回應式設計

這個程式碼研究室是 Google Developers 訓練團隊開發的「開發漸進式網頁應用程式」訓練課程的一部分。建議您依序完成程式碼研究室，充分體驗本課程的價值。

如要瞭解課程的完整詳細資料，請參閱開發漸進式網頁應用程式總覽。

簡介

本實驗室將說明如何設定網站內容的樣式，使其具備回應性。

課程內容

  • 如何設定應用程式樣式，讓應用程式適用多種板型規格
  • 如何使用 Flexbox 輕鬆將內容整理成欄
  • 如何使用媒體查詢，根據螢幕大小重新整理內容

注意事項

  • 基本 HTML 和 CSS

軟硬體需求

  • 可存取終端機/殼層的電腦
  • 網際網路連線
  • 文字編輯器

從 GitHub 下載或複製 pwa-training-labs 存放區，並視需要安裝 Node.js 的 LTS 版本。

如果沒有偏好的本機開發伺服器，請安裝 Node.js http-server 套件：

npm install http-server -g

前往 responsive-design-lab/app/ 目錄並啟動伺服器：

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

你隨時可以按下 Ctrl-c 終止伺服器。

開啟瀏覽器並前往 localhost:8080/。

注意：取消註冊所有 Service Worker，並清除 localhost 的所有 Service Worker 快取，以免干擾實驗室。在 Chrome 開發人員工具中，按一下「應用程式」分頁的「清除儲存空間」部分中的「清除網站資料」，即可達成這個目標。

如果文字編輯器可開啟專案，請開啟 responsive-design-lab/app/ 資料夾。這樣就能更輕鬆地整理檔案。否則，請在電腦的檔案系統中開啟資料夾。您將在 app/ 資料夾中建構實驗室。

這個資料夾包含：

  • index.html 是範例網站/應用程式的主要 HTML 網頁
  • modernizr-custom.js 是一項功能偵測工具，可簡化 Flexbox 支援的測試作業
  • styles/main.css 是範例網站的層疊樣式表

返回瀏覽器中的應用程式。請嘗試將視窗寬度縮小至 500 像素以下，並注意內容無法正常回應。

開啟開發人員工具，並在瀏覽器中啟用裝置模式。這個模式會模擬應用程式在行動裝置上的行為。請注意，網頁會縮放至符合畫面上的固定寬度內容。因為對大多數使用者來說，內容可能會太小，必須縮放和平移才能看清楚，因此這不是良好的體驗。

在 index.html 中，將 TODO 3 替換為下列標記：

<meta name="viewport" content="width=device-width, initial-scale=1">

儲存檔案。在瀏覽器中重新整理頁面，並以裝置模式檢查頁面。請注意，網頁不再縮小，內容的比例也與電腦裝置上的比例相符。如果內容在裝置模擬器中出現異常行為，請切換進出裝置模式，重設模擬器。

注意：裝置模擬功能可讓您大致瞭解網站在行動裝置上的顯示情形，但如要取得完整資訊，請務必在實體裝置上測試網站。如要進一步瞭解如何在 Chrome 和 Firefox 上偵錯 Android 裝置，請參閱相關說明。

說明

中繼檢視區標記會指示瀏覽器如何控管網頁大小和縮放比例。width 屬性可控制可視區域的大小。可以設為特定像素數 (例如 width=500)，也可以設為特殊值 device-width,，也就是 CSS 像素的螢幕寬度 (縮放比例為 100%)。(有對應的 height 和 device-height 值，對於元素會根據可視區域高度變更大小或位置的頁面來說，這可能很有用)。

initial-scale 屬性可控制網頁首次載入時的縮放等級。設定初始比例可提升體驗，但內容仍會溢出螢幕邊緣。我們會在下一個步驟中修正這個問題。

瞭解詳情

將 styles/main.css 中的 TODO 4 替換為下列程式碼：

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

儲存檔案。在瀏覽器中停用裝置模式，然後重新整理頁面。請嘗試縮小視窗寬度。請注意，內容會在指定寬度切換為單欄版面配置。重新啟用裝置模式，並觀察內容是否會自動調整大小，配合裝置寬度。

說明

為確保文字可讀性，當瀏覽器寬度達到 48rem (瀏覽器預設字型大小為 768 像素，或使用者瀏覽器預設字型大小的 48 倍) 時，我們會使用媒體查詢。如要瞭解為何 rem 是相對單位的理想選擇，請參閱「何時使用 em 與 rem」。觸發媒體查詢時，我們會將版面配置從三欄變更為一欄，方法是變更三個 width 的每個 div，填滿頁面。

彈性方塊版面配置模組 (Flexbox) 是一種實用且易於使用的工具，可讓內容具備回應性。Flexbox可讓我們達成與先前步驟相同的結果，但會為我們處理所有間距計算，並提供大量現成可用的 CSS 屬性，用於建構內容。

在 CSS 中註解現有規則

將 styles/main.css 中的所有規則包裝在 /* 和 */ 中，為這些規則加上註解。如果 Flexbox 不支援 Flexbox，我們會將這些規則做為備用規則，如「漸進式強化」一節所述。

新增 Flexbox 版面配置

將 styles/main.css 中的 TODO 5.2 替換為下列程式碼：

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

儲存程式碼，然後在瀏覽器中重新整理 index.html。在瀏覽器中停用裝置模式，然後重新整理頁面。如果縮小瀏覽器視窗，欄位會變窄，直到只剩一個欄位為止。我們會在下一個練習中，使用媒體查詢修正這個問題。

說明

第一條規則會將 container div 定義為彈性容器。這會為所有直接子項啟用彈性內容。我們混合使用新舊語法來納入 Flexbox，以獲得更廣泛的支援 (詳情請參閱「如需更多資訊」)。

第二條規則使用 .col 類別建立等寬彈性子項。將 flex 屬性的第一個引數設為 1，即可將所有具有 col 類別的 div 剩餘空間平均分配。這比我們自行計算及設定相對寬度更方便。

瞭解詳情

選用：設定不同的相對寬度

使用 nth-child 虛擬類別，將前兩欄的相對寬度設為 1，第三欄則設為 1.5。你必須使用 flex 屬性，為每個資料欄設定相對寬度。舉例來說，第一欄的選取器會如下所示：

.container .col:nth-child(1)

搭配 Flexbox 使用媒體查詢

將 styles/main.css 中的 TODO 5.4 替換為下列程式碼：

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

儲存程式碼，然後在瀏覽器中重新整理 index.html。現在縮小瀏覽器寬度時，內容會重新排列成單欄。

說明

觸發媒體查詢時，我們會將 flex-flow 屬性設為 column，將版面配置從三欄變更為一欄。這與我們在步驟 5 中加入的媒體查詢效果相同。Flexbox 提供許多其他屬性 (例如 flex-flow)，可讓您輕鬆建構、重新排序及對齊內容，確保內容在任何情況下都能正常顯示。

由於 Flexbox 是相對較新的技術，我們應在 CSS 中加入備用項目。

新增 Modernizr

Modernizr 是一種功能偵測工具，可簡化 Flexbox 支援測試。

在 index.html 中，將 TODO 6.1 替換為包含自訂 Modernizr 建構版本的程式碼：

<script src="modernizr-custom.js"></script>

說明

我們在 index.html 頂端加入 Modernizr 建構版本，用於測試 Flexbox 支援。這會在網頁載入時執行測試，並在瀏覽器支援 Flexbox 時，將 flexbox 類別附加至 <html> 元素。否則，系統會將 no-flexbox 類別附加至 <html> 元素。在下一節中，我們會將這些類別新增至 CSS。

注意：如果我們使用 Flexbox 的 flex-wrap 屬性，就必須為這項功能新增個別的 Modernizr 偵測器。部分舊版瀏覽器僅部分支援 Flexbox，且不包含這項功能。

逐步使用 Flexbox

讓我們在 CSS 中使用 flexbox 和 no-flexbox 類別，在系統不支援 Flexbox 時提供遞補規則。

現在在 styles/main.css 中，於我們註解排除的每個規則前面新增 .no-flexbox：

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

在同一個檔案中，在其他規則前面新增 .flexbox：

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

如果您已完成選用步驟 5.3，請記得在個別資料欄的規則中加入 .flexbox。

儲存程式碼，然後在瀏覽器中重新整理 index.html。網頁看起來應該和之前一樣，但現在可以在任何裝置的任何瀏覽器上順利運作。如果瀏覽器不支援 Flexbox，請在該瀏覽器中開啟 index.html，測試備援規則。

瞭解詳情

您已學會設定內容樣式，使其具備回應性。您可以使用媒體查詢，根據使用者裝置的視窗或螢幕大小變更內容版面配置。

涵蓋內容

  • 設定畫面可視區域
  • Flexbox
  • 媒體查詢

資源

進一步瞭解回應式設計的基本概念

進一步瞭解 Flexbox 做為漸進式強化功能

瞭解回應式 CSS 的程式庫

進一步瞭解如何使用媒體查詢

如要查看 PWA 訓練課程中的所有程式碼研究室，請參閱課程的歡迎程式碼研究室。