回應式網頁設計支援多種視窗大小

– 10 分鐘閱讀

現代網頁需要在各種不同大小的螢幕上良好呈現，這就需要回應式網頁設計。透過 CSS 媒體查詢，可以根據螢幕寬度調整網頁佈局。例如，使用 CSS Grid 可以輕鬆建立彈性網格系統，並利用媒體查詢在不同螢幕尺寸下調整欄位數量和排列方式。同時，前端框架如 Vue.js 也能配合媒體查詢，動態調整元件樣式，開發更流暢的使用者經驗。此外，若網頁需與後端互動，則可使用 Flask 等框架建構 Web API，提供資料讀取和寫入功能，並確保 API 在各種裝置上都能正常運作。

使用回應式網頁佈局支援多種視窗大小

簡介

建立網頁是一項挑戰，不僅需要使用HTML、CSS和JavaScript來實作所需的功能，還需要確保這些頁面對大多數使用者來說是可存取的。此外，無論裝置是PC、平板電腦電腦還是行動裝置，都需要確保頁面能夠很好地呈現，這意味著需要考慮螢幕大小、裝置方向（橫向或縱向）以及畫素密度等因素。

回應式設計的策略與實作

要確保網頁在多種裝置上都有良好的表現，首先需要有一個策略和願景，根據使用者使用的裝置提供不同的體驗。一旦確定了願景，就可以開始實作。

在實作過程中，需要做出多項選擇，例如：

  • 內容以多欄呈現時，應有多少欄？
  • 邊距和間距應該如何變化？
  • 內容應該居中還是靠左對齊？
  • 內容應該垂直堆積疊還是水平排列？
  • 是否有某些內容應該在行動裝置上隱藏？

這些選擇都會影響到需要使用的提示詞。

使用AI助手進行網頁佈局

使用AI助手可以幫助處理網頁佈局，因為這涉及到大量需要記住的資訊。AI助手不僅可以記住這些細節以便快速查詢，還可以提出不同的設計建議。

在本章中，我們將：

  1. 解釋技術術語，如視窗大小和媒體查詢。
  2. 應用不同技術來最佳化不同視窗大小下的呈現效果。
  3. 利用Copilot的聊天功能來改程式式碼。這是GitHub Copilot中的另一種使用方式；它是一個聊天視窗，可以輸入提示詞並獲得回應。這個體驗類別似於ChatGPT這樣的AI工具。

回應式網頁設計實務

使用媒體查詢最佳化視窗大小

媒體查詢是CSS3中的一個功能，允許根據不同的裝置特徵（如螢幕寬度）應用不同的樣式規則。下面是一個基本的媒體查詢範例：

/* 基本樣式 */
.container {
  width: 100%;
  padding: 20px;
}

/* 當螢幕寬度大於768px時 */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* 當螢幕寬度大於992px時 */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

/* 當螢幕寬度大於1200px時 */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

使用Vue.js建立回應式元件

在Vue.js中，可以透過結合媒體查詢和Vue的回應式特性來建立適應不同視窗大小的元件。

// Vue元件範例
export default {
  data() {
    return {
      screenWidth: document.documentElement.clientWidth
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = document.documentElement.clientWidth;
    }
  },
  computed: {
    isMobile() {
      return this.screenWidth < 768;
    }
  }
}
</script>

<template>
  <div :class="{'mobile-layout': isMobile, 'desktop-layout': !isMobile}">
    <!-- 元件內容 -->
  </div>
</template>

<style scoped>
.mobile-layout {
  /* 行動裝置樣式 */
}

.desktop-layout {
  /* 桌面裝置樣式 */
}
</style>

利用Copilot聊天功能最佳化程式碼

Copilot的聊天功能允許開發者輸入提示詞以獲得程式碼建議或改進。這對於最佳化回應式設計非常有幫助，因為它可以根據開發者的需求提供具體的程式碼範例或建議。

例如，當你輸入“最佳化這個元件使其在行動裝置上表現更好”時，Copilot可能會提供有關如何使用媒體查詢或調整元件佈局的建議。

支援多種裝置的回應式網頁設計

在電子商務領域中，使用者會使用不同的裝置存取網站，因此確保網站能在各種裝置上提供良好的使用者經驗至關重要。本章將延續前幾章的電子商務案例，探討如何構建回應式網頁設計，以滿足不同裝置的需求。

問題與資料領域

目前市場上有許多不同的裝置，如平板電腦電腦、手機和不同尺寸的桌面螢幕等。這些裝置的畫素密度各不相同，因此僅僅縮放或放大網站以適應新裝置是不夠的。我們需要根據特定裝置的視覺風格設計完全不同的使用者經驗。此外，我們還需要考慮到裝置的限制，例如平行下載數量和網路速度。

功能分解

為了實作回應式網頁設計，我們需要識別出需要實作的功能。這些功能主要與使用者經驗相關，而不是資料領域。以下是一些可能的功能分解：

  • 在橫向模式下，購物籃頁面應以雙欄設計呈現。
  • 在縱向模式下，購物籃頁面應以單欄設計呈現。
  • 應在螢幕底部顯示選單操作。
  • 應隱藏某些功能，例如 X、Y、Z（假設這些功能在寬螢幕桌面上可用）。
  • 應支援並呈現對 iPhone、X、Y、X 和 Android 等行動裝置具有視覺吸引力的外觀。
  • 應在 3G 連線下於 1 秒內呈現頁面。

媒體查詢

要實作回應式網頁設計，我們需要使用媒體查詢。媒體查詢是一種 CSS 邏輯區塊，用於根據特定條件應用特定的 CSS 樣式。例如：

body {
  background: blue;
}

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上述程式碼根據視口寬度是否小於或等於 600 畫素來應用不同的背景顏色。

內容解密：

  • @media 用於定義媒體查詢。
  • (max-width: 600px) 是條件，表示視口寬度小於或等於 600 畫素。
  • 在條件成立時，應用 body { background-color: lightblue; } 樣式。

調整不同視口的時機

當我們的網頁設計在桌面上看起來很好，但在行動裝置上太寬時，就需要使用回應式設計。例如，當我們有一個左側選單和右側主區域的網頁時，在行動裝置上可能會出現問題。為瞭解決這個問題，我們可以使用 flexbox 或 grid 等技術來垂直對齊內容。

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  background-color: #000;
  padding: 10px;
  grid-gap: 10px;
  height: 100%;
}

.menu {
  background-color: darkslategrey;
  padding: 0px;
  grid-column: 1;
}

.menu-item {
  padding: 5px;
  background-color: darkslategrey;
  height: 20px;
}

內容解密：

  • .container 定義了網格容器，設定了最大寬度、邊距、顯示型別和網格範本列。
  • .menu 定義了選單樣式，設定了背景顏色、填充和網格列。
  • .menu-item 定義了選單項樣式，設定了填充、背景顏色和高度。

回應式網頁設計：支援多種視窗大小

在現代網頁開發中，回應式設計（Responsive Web Design）已成為不可或缺的一部分。為了確保網站在不同裝置上都能提供良好的使用者經驗，我們需要使用 CSS 的媒體查詢（Media Queries）來調整佈局。

使用 CSS Grid 實作回應式佈局

首先，我們來看看一個簡單的例子。假設我們有一個包含選單和主要內容區域的容器，使用 CSS Grid 進行佈局：

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-gap: 10px;
}

.menu {
  grid-column: 1;
  background-color: rgb(25, 41, 41);
}

.main {
  grid-column: 2;
  padding: 5px;
  background-color: darkslategrey;
  color: white;
}

內容解密：

  1. .container 使用 display: grid 將其子元素佈局設定為網格系統。
  2. grid-template-columns: 200px 1fr 定義了兩個欄位，第一欄寬度為 200px，第二欄佔據剩餘空間。
  3. .menu 和 .main 分別被分配到第一和第二欄。

為行動裝置調整佈局

為了讓這個佈局在行動裝置上也能良好運作，我們需要使用媒體查詢來調整 CSS：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 1fr;
  }
  .menu {
    grid-row: 1;
    grid-column: 1;
  }
  .main {
    grid-row: 2;
    grid-column: 1;
  }
}

內容解密：

  1. @media (max-width: 768px) 指定了當視窗寬度小於或等於 768px 時應用的樣式，通常用於行動裝置。
  2. 將 .container 的 grid-template-columns 改為 1fr，表示只使用一個欄位，並新增 grid-template-rows 以定義兩個行。
  3. 調整 .menu 和 .main 的 grid-row 和 grid-column 屬性，使選單顯示在上方，主要內容顯示在下方。

電子商務產品列表的回應式設計

接下來，我們考慮一個電子商務產品列表的例子。初始的 HTML 和 CSS 程式碼如下：

<div class="container">
  <div class="menu">...</div>
  <div class="main">
    <div class="gallery">
      <!-- gallery items -->
    </div>
  </div>
</div>

.gallery {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
}

內容解密：

  1. .gallery 使用 CSS Grid 以三欄的形式展示產品。
  2. grid-template-columns: auto auto auto 定義了三個自動寬度的欄位。

為行動裝置調整產品列表

同樣地，我們需要為行動裝置調整這個佈局：

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: auto;
  }
}

內容解密：

  1. 在行動裝置上，將 .gallery 的 grid-template-columns 改為 auto，使產品列表變成單欄顯示。

建構後端與 Web API

簡介

當我們提到 Web API 時，指的是開發用於客戶端消費的應用程式介面。這種 API 使用 HTTP 進行通訊。瀏覽器可以使用 Web API 向其他瀏覽器和應用程式公開資料和功能。

開發 Web API 時，可以使用任何程式語言和框架。無論選擇何種技術，都需要考慮資料儲存、安全性、驗證、授權、檔案、測試等事項。

在瞭解需要考慮的事項後，我們可以使用 AI 助手協助建構後端。

商業領域：電子商務

本章節將繼續使用電子商務範例，重點關注 API。該 API 允許讀取和寫入電子商務領域中重要的資料。開發此 API 時，需要注意以下幾點：

  • 邏輯領域：將應用程式劃分為不同的邏輯領域非常有益。在電子商務的背景下，通常會轉化為產品、訂單、發票等。
  • 哪些業務部分應該處理每個邏輯領域？
    • 產品：可能有專門的團隊負責。同時，該團隊通常也負責管理各種折扣和促銷活動。
    • 發票和付款：通常有專門的團隊負責處理使用者付款，例如信用卡、發票等。
    • 庫存：需要有一定數量的貨物庫存。如何知道有多少庫存？需要與業務分析師或資料團隊合作進行正確的預測。

問題和資料領域

前面已經提到了產品、訂單、發票等不同的邏輯領域。此領域中的問題通常包括：

  • 讀取和寫入：希望讀取或寫入哪些資料（或許兩者兼有）？
  • 使用者如何存取資料（全部或許會套用篩選條件限制輸出）？
  • 存取和角色：可以預期不同的角色需要存取系統。管理員角色可能應該能夠存取大多數資料，而登入使用者只能看到屬於自己的資料部分。

功能分解

瞭解商業問題和資料問題後，需要開始識別所需的功能。一旦達到此詳細程度，就更容易提出具體的提示。

進行功能分解的一種方法是針對產品：

  • 讀取所有產品。
  • 給定篩選條件讀取產品：通常不會希望讀取所有產品，而是希望讀取特定類別的產品，或許甚至限制為特定值，例如 10 或 20 個產品。
  • 搜尋產品：應該支援使用者查詢特定產品，通常透過類別、名稱或特定促銷活動。
  • 檢索特定產品的詳細資訊。

提示策略

本章節將展示如何使用 Copilot Chat 和編輯器內模式。首先使用 Chat 模式，因為它在需要產生初始程式碼的情況下非常有用。當希望改進某些程式碼時，也可以選擇特定的程式碼行並根據提示更新。

程式碼範例

from flask import Flask, jsonify

app = Flask(__name__)

# 靜態資料
products = [
    {"id": 1, "name": "Product 1"},
    {"id": 2, "name": "Product 2"},
]

@app.route('/products', methods=['GET'])
def get_products():
    return jsonify(products)

if __name__ == '__main__':
    app.run(debug=True)

內容解密：

上述程式碼建立了一個基本的 Flask Web API，具有一個傳回靜態產品列表的路由 /products。

  1. 首先，匯入必要的模組，包括 Flask 和 jsonify。
  2. 建立一個 Flask 應使用案例項 app。
  3. 定義一個靜態的產品列表 products，包含兩個產品物件。
  4. 使用 @app.route 裝飾器定義了一個路由 /products，該路由回應 GET 請求，並傳回 products 列表的 JSON 表示。
  5. 最後，如果直接執行此指令碼，則啟動 Flask 開發伺服器。

本章節將使用「探索性提示模式」來建構 Web API，並展示如何利用 AI 助手回答問題、建議程式碼和建立檔案及測試。

使用Web API建構後端應用

在開發前端應用程式時，使用Web API可以確保應用程式能夠存取所需的資料和功能，以實作資料的讀取和寫入。Web API的基本要求包括：

  • 可以透過網路存取
  • 使用HTTP協定和HTTP動詞（如GET、POST、PUT、DELETE等）來傳達意圖

選擇程式語言和框架

本章中，我們選擇使用Python和Flask作為開發Web API的工具。選擇的依據包括：

  • 熟悉的程式語言和框架
  • 易於學習和使用
  • 擁有龐大的社群支援
  • 免費且開源
  • 更新頻率和檔案品質

Python和Flask具備上述多個優點，因此成為本章的選擇。當然，也可以使用其他程式語言和框架，如Node.js的Express框架。

規劃Web API

在規劃Web API時，需要考慮以下幾點：

  • 要公開哪些資料（如產品和訂單）
  • 要公開哪些功能（如讀取訂單資料）
  • 如何組織Web API的結構
  • 安全性和驗證機制
  • 資料儲存和資料函式庫選擇（如MySQL和Postgres）

使用Python和Flask建立Web API

要使用Python和Flask建立Web API，需要具備一定的Python知識和Web API開發經驗。以下是建立Web API的步驟：

步驟1：建立新專案

首先，需要建立一個新的專案。建議使用虛擬環境來隔離專案與其他Python專案。使用虛擬環境不是必要的，但可以避免不同版本的Python和套件之間的衝突。

要建立虛擬環境，可以使用以下指令：

python -m venv venv

接下來，需要啟動虛擬環境。在Windows上，可以使用以下指令：

venv\Scripts\activate

步驟2：安裝Flask

要安裝Flask，可以使用pip指令：

pip install Flask

步驟3：建立進入點

需要建立一個進入點檔案（通常命名為app.py），作為Web API的執行檔案。

步驟4：建立Flask應用程式

要建立Flask應用程式，需要匯入Flask模組並建立應用程式例項。以下是範例程式碼：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello World!'

@app.route('/hello')
def hello():
    return 'Hello World!'

程式碼解析：

  1. from flask import Flask：匯入Flask模組。
  2. app = Flask(__name__)：建立Flask應用程式例項。
  3. @app.route('/') 和 @app.route('/hello')：定義路由，分別對應到 / 和 /hello 路徑。
  4. def index() 和 def hello()：定義路由對應的處理函式，傳回 “Hello World!” 字串。

這些程式碼共同構成了一個簡單的Flask應用程式，提供了兩個路由，分別傳回相同的 “Hello World!” 字串。透過這個範例，可以瞭解如何使用Flask建立基本的Web API。

玄貓 BlackCat

玄貓 BlackCat

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。