Day 27 - 響應式網頁設計（視圖、斷點、Media Query）

18th鐵人賽 day 27 css html

饅頭

團隊第二屆技術創作市集

2026-09-15 12:01:52

80 瀏覽

分享至

現代人使用多種裝置瀏覽網頁，從桌上型電腦、筆記型電腦、平板到手機，螢幕尺寸差異極大。響應式網頁設計（Responsive Web Design，簡稱 RWD）就是為了讓網頁能在各種裝置上都能提供良好的瀏覽體驗而誕生的設計方法。RWD 的核心概念是「一個網站，能適用多種螢幕」。透過彈性的版面配置與 CSS 媒體查詢，網頁能根據螢幕尺寸自動調整內容呈現方式，無需為每種裝置建立專屬網站。

視圖設定

Viewport（視圖）是瀏覽器中網頁內容的可視區域。在電腦上，視圖等於瀏覽器視窗大小；在行動裝置上，情況則較為複雜。早期的行動裝置會將網頁縮小顯示，以便在小螢幕上呈現完整內容。但現代網頁多採用響應式設計，這種縮小設定反而會讓文字過小而難以閱讀。為解決此問題，需在 HTML 的 <head> 區域加入 viewport meta 標籤：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

width=device-width：將 Viewport 寬度設定為裝置的實際寬度
initial-scale=1.0：設定初始縮放比例為 1（不縮放）

有了這個設定，網頁就能在行動裝置上以正常大小顯示，而不是被縮小成難以閱讀的版本。

斷點設定

斷點（Breakpoints）是響應式設計中，觸發版面改變的視窗寬度臨界點，用於決定網頁何時改變外觀。當視窗寬度達到斷點時，瀏覽器會透過 CSS 媒體查詢（media query）自動切換樣式，以符合不同裝置的顯示需求。以下整理出常見的裝置尺寸提供參考，實際設定斷點時可根據需求再進行微調。

Media Query 媒體查詢

Media Query 是 CSS 中用來設定樣式套用條件的查詢工具。它能讓我們根據裝置特性（如螢幕寬度、高度、方向等）來決定何時套用特定的 CSS 樣式，只有當條件符合時，樣式才會生效。

@media (媒體查詢條件) {
  /* 當條件符合時套用的 CSS */
}

透過這樣的查詢工具，我們就能實現響應式設計。以下會介紹有哪一些媒體查詢條件可以設定，以及設定樣式的方法。

媒體查詢條件

寬度相關：根據「視窗寬度 / 螢幕寬度」作為切換樣式的條件，常被用於作為響應式網頁的斷點。
```
@media (max-width: 768px) { ... }    /* 最大寬度：寬度 ≤  768px 時套用樣式 */
@media (min-width: 1024px) { ... }   /* 最小寬度：寬度 ≥ 1024px 時套用樣式 */
```
也可以改寫成新的寫法：
```
@media (width <= 768px) { ... }
@media (width >= 1024px) { ... }
```
- 例如：當視窗寬度較大時，左右空間充足，可以將元件橫向排列；視窗寬度較小時，則將元件縱向排列，或加入橫向捲動功能。
高度相關：根據「視窗高度 / 螢幕高度」作為切換樣式的條件，常用於全螢幕滿版的版面或需要精確控制垂直空間的設計。
```
@media (max-height: 600px) { ... }   /* 最大高度 */
@media (min-height: 800px) { ... }   /* 最小高度 */
```
- 例如：當視窗高度縮小時，可能需要隱藏部分裝飾元素或調整元件間距，確保重要內容仍能完整顯示。
螢幕方向：根據「螢幕的顯示方向」作為切換樣式的條件，可以針對橫向或直立模式提供不同版面設計。
```
@media (orientation: portrait) { ... }  /* 直立模式 */
@media (orientation: landscape) { ... } /* 橫向模式 */
```
- 例如：行動裝置橫向顯示時，垂直空間縮減，需確認操作功能是否受影響。
系統深色與淺色模式：根據「使用者的系統主題」作為切換樣式的條件，常用於套用不同的顏色配置。
```
@media (prefers-color-scheme: dark) { ... }   /* 深色模式 */
@media (prefers-color-scheme: light) { ... }  /* 淺色模式 */
```
- 例如：深色模式下，背景顏色使用深色，文字使用淺色；淺色模式下，背景顏色使用淺色，文字使用深色。

設定方法

一般在設定響應式樣式時，我們會先定義預設的基礎樣式，然後在程式碼的下方區塊使用 @media 媒體查詢語法，來針對不同的螢幕尺寸或裝置條件進行樣式的覆寫與調整。

以右側為例，基礎樣式定義了背景顏色 background: #fff;，@media 內則定義了不同的背景顏色 background: #eee;。當視窗寬度符合條件時，@media 內的 background 會覆寫基礎樣式的 background。

/* 基礎樣式 */
.box {
  background: #fff;
  height: 300px;
  width: 300px;
}
/* 裝置寬度 ≤ 768px 時的樣式 */
@media (max-width: 768px) {
  .box {
    background: #eee;
  }
}

@media 也可以使用巢狀式寫法，寫在選擇器內部！

/* 巢狀寫法 */
.box {
  background: #fff;
  height: 300px;
  width: 300px;
  @media (max-width: 768px) {
    background: #eee;
  }
}

寬度斷點的兩種設計策略

開發響應式網站時，通常會選擇以下其中一種策略：

Desktop First（桌面優先）：先設計桌面版，再縮減到小螢幕。使用 max-width 來向下調整樣式。
Mobile First（行動裝置優先）：先設計手機版，再逐步擴展到更大螢幕。使用 min-width 來向上擴展樣式。

現今多數專案採用 Mobile First 策略，因為行動裝置使用率較高，且「從簡單到複雜」的設計思維更符合漸進增強原則。相反地，如果選擇 Desktop First 策略，反而是「從複雜到簡單」，當要設計行動裝置版本時，就會需要撰寫更多指令來拆解或隱藏原先的樣式設定。

總結

響應式網頁設計的目的，是讓網站能適應不同尺寸的螢幕，無論使用者是透過電腦、平板或手機瀏覽，都能獲得良好的閱讀與操作體驗。實作 RWD 時，可以先透過 viewport 設定，讓網頁正確對應裝置的可視區域；接著根據內容需求規劃斷點，再利用 Media Query 在不同條件下調整版面、尺寸、排列方式與顏色。

在設計策略上，Mobile First 通常是較推薦的做法：先完成小螢幕的基本版面，再使用 min-width 逐步增加大螢幕需要的樣式。需要注意的是，斷點不應只依照特定裝置尺寸設定，而應以內容是否能清楚顯示、操作是否方便作為判斷依據。掌握這些概念後，就能建立一個具備彈性、可讀性與良好使用體驗的響應式網站。