你辛苦做好的網頁，在電腦上看起來很漂亮，拿手機一開，卻出現橫向捲軸、字小到看不清、圖片超出畫面……這是因為訪客使用的裝置五花八門，螢幕寬度從手機的 360 像素到桌機的 1920 像素都有。要讓同一個網頁在各種螢幕上都能舒服閱讀，就需要「響應式網頁設計」（Responsive Web Design，簡稱 RWD）。
本文延續上一篇〈網頁版面配置入門〉的觀念，用「記事本」與瀏覽器，以 5 個步驟做出一個會隨螢幕寬度自動調整的卡片網頁。我們會另外建立 rwd.html 與 rwd.css 練習，不影響你之前的檔案。文中的圖片為示意圖，不是實際畫面。
先搞懂：RWD 是什麼？
RWD 的概念是：只做一份網頁，讓它自己依照螢幕寬度調整排版，而不是為手機、平板、電腦各做一個網站。想做到這件事，需要三個要素：
- 流動的版面：寬度用百分比等彈性單位，而不是固定像素。
- 彈性的圖片：圖片不會比容器更寬。
- 媒體查詢（Media Query）：依螢幕寬度，套用不同的樣式。
圖 1 螢幕越寬，欄數越多（示意圖）
步驟一：建立練習檔案，並設定 viewport
在 myweb 資料夾新增 rwd.html 與 rwd.css（存檔類型選「所有檔案」，編碼選 UTF-8），然後在 rwd.html 輸入：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>響應式網頁練習</title>
<link rel="stylesheet" href="rwd.css">
</head>
<body>
<header class="top">
<h1>響應式網頁練習</h1>
</header>
<main class="page">
<section class="intro">
<h2>歡迎來到我的網站</h2>
<p>試著拉動瀏覽器視窗的寬度，看看下面的卡片會怎麼變化。</p>
</section>
<section class="cards">
<article class="card"><h3>HTML</h3><p>決定網頁的結構與內容。</p></article>
<article class="card"><h3>CSS</h3><p>決定網頁的外觀與版面。</p></article>
<article class="card"><h3>JavaScript</h3><p>讓網頁能回應使用者的操作。</p></article>
<article class="card"><h3>表格</h3><p>整齊地呈現資料。</p></article>
<article class="card"><h3>表單</h3><p>蒐集訪客輸入的資料。</p></article>
<article class="card"><h3>Flexbox</h3><p>彈性排列網頁的區塊。</p></article>
</section>
</main>
<footer>
<p>© 2026 我的學習筆記</p>
</footer>
</body>
</html>
重點是 <head> 裡的這一行：
<meta name="viewport" content="width=device-width, initial-scale=1">
手機瀏覽器為了相容舊網站，預設會假裝自己的螢幕寬度有 980 像素，再把畫面縮小顯示。這行設定告訴它：「請使用裝置的真實寬度，不要縮放。」少了它，後面所有的 RWD 設定在手機上都不會生效，這是新手最常忘記的一步。
步驟二：用彈性單位取代固定寬度
RWD 的第一個原則：少用固定的像素寬度，多用彈性單位。打開 rwd.css，輸入以下的基本樣式：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft JhengHei", sans-serif;
font-size: 1rem;
line-height: 1.8;
color: #333333;
background-color: #f5f8ff;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.top {
background-color: #1f3a5f;
color: #ffffff;
text-align: center;
padding: 20px 16px;
}
.top h1 {
font-size: clamp(1.4rem, 4vw, 2.2rem);
}
.page {
width: 92%;
max-width: 1100px;
margin: 24px auto;
}
.intro {
margin-bottom: 24px;
}
footer {
background-color: #1e293b;
color: #cbd5e1;
text-align: center;
padding: 16px;
}
來看這幾個關鍵設定：
width: 92%搭配max-width: 1100px：內容區平常占螢幕 92% 的寬度，螢幕很寬時最多只到 1100 像素，兩者合作就能「小螢幕貼合、大螢幕不拉太寬」。img { max-width: 100%; height: auto }：圖片最寬只會到容器的寬度，高度跟著等比例縮放。只要加上這一條，圖片就不會再超出畫面。rem：相對於根元素字體大小的單位，預設 1rem＝16 像素。用 rem 設定字級，使用者在瀏覽器調整字體大小時，網頁才會跟著變。clamp(最小值, 理想值, 最大值)：讓數值在範圍內隨螢幕變動。標題字級的理想值是視窗寬度的 4%，但不會小於 1.4rem，也不會大於 2.2rem。
常見的 CSS 單位
| 單位 | 意思 | 適合用在 |
|---|---|---|
px | 固定像素 | 框線粗細、小細節 |
% | 相對於父元素 | 區塊寬度 |
rem | 相對於根元素的字級 | 字級、間距 |
vw、vh | 視窗寬度、高度的 1% | 滿版區塊、隨視窗變動的字級 |
fr | Grid 中「一份」剩餘空間 | Grid 欄寬（步驟三會用到） |
步驟三：用 CSS Grid 排出卡片
上一篇我們學了 Flexbox，它擅長「一維」排列（一橫列或一直欄）。這次要認識它的好夥伴 CSS Grid（格線），專門處理「二維」的排列：同時控制列與欄，非常適合排卡片、相簿這類整齊的格狀內容。
在 rwd.css 後面加入：
.cards {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
.card {
background-color: #ffffff;
border: 1px solid #dbe3ee;
border-radius: 8px;
padding: 16px;
}
.card h3 {
color: #1f6feb;
margin-bottom: 6px;
}
display: grid：把.cards變成一個格線容器，裡面的卡片會自動排進格子。grid-template-columns: 1fr：定義欄的數量與寬度。fr是「份數」，1fr代表只有一欄，寬度占滿整個容器。gap: 16px：格子之間的間距，列與欄都適用。
存檔後用瀏覽器開啟 rwd.html，6 張卡片會由上往下排成一欄。這正好是手機畫面最適合的排法，我們先把手機版做好，這種做法稱為「行動優先」（Mobile First）。
Flexbox 與 Grid 怎麼選？
- Flexbox：一維排列。適合選單、按鈕列、一排項目的對齊與分布。
- Grid：二維排列。適合卡片牆、相簿、整個頁面的大區塊配置。
兩者可以搭配使用：用 Grid 排出整體格局，再用 Flexbox 排列每一格裡面的內容。
步驟四：用媒體查詢，在螢幕變寬時增加欄數
媒體查詢的寫法是 @media (條件) { 規則 }，只有條件成立時，大括號裡的規則才會生效。「行動優先」的做法，是先寫好手機版的基本樣式，再用 min-width「當螢幕寬度『至少』達到多少時」，逐步加上更寬螢幕的樣式。請在 rwd.css 最後面加入：
@media (min-width: 600px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 960px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}
repeat(2, 1fr)：等於寫1fr 1fr，也就是兩欄等寬。repeat(3, 1fr)就是三欄等寬。min-width: 600px：視窗寬度達到 600 像素以上時，改成兩欄。min-width: 960px：視窗寬度達到 960 像素以上時，改成三欄。
圖 2 用兩個斷點，切成三種排版（示意圖）
存檔後重新整理 rwd.html，把瀏覽器視窗慢慢拉寬，你會看到卡片從 1 欄，變成 2 欄，再變成 3 欄。
斷點該怎麼決定？
| 視窗寬度 | 常見對應裝置 | 常見做法 |
|---|---|---|
| 小於 600px | 手機 | 單欄，區塊上下堆疊 |
| 600px～959px | 平板、手機橫放 | 雙欄 |
| 960px 以上 | 筆電、桌機 | 三欄以上、加上側邊欄 |
這些數字只是常見的參考值。比較好的做法是：拉動視窗寬度，在「版面看起來開始不舒服」的地方設斷點，而不是死守某款手機的規格。斷點也不必設太多，2 到 3 個通常就夠了。
步驟五：用 auto-fit 讓格線自動換欄，並測試成果
步驟四的做法很直覺，但每增加一種欄數就要多寫一個 @media。Grid 有個更聰明的寫法，可以不寫斷點，由瀏覽器自己決定能放幾欄。請把 .cards 規則裡的 grid-template-columns 改成：
.cards {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
然後把步驟四加入的兩個 @media 區塊刪掉（或前後加上 /* */ 註解起來），存檔重新整理。你會發現效果幾乎一樣，而且程式更短：
minmax(220px, 1fr)：每個欄位「最窄 220 像素，最寬占一份」。auto-fit：由瀏覽器計算「容器寬度能放得下幾個 220 像素的欄位」，放得下就多排一欄，放不下就自動減少欄數。
圖 3 auto-fit 會依容器寬度，自動決定欄數（示意圖）
什麼時候用 auto-fit？什麼時候用媒體查詢？
- auto-fit＋minmax：適合卡片、相簿這種「一堆相同大小的項目」，程式短、不用想斷點。
- 媒體查詢：適合「版面結構」要改變的時候，例如電腦版的側邊欄，到了手機要移到文章下方，或選單要收合起來。
實務上兩者常常搭配使用。上一篇的 layout.css 最後那段，就是用媒體查詢，把雙欄改成單欄。
測試你的 RWD 成果
- 拉動視窗寬度：最簡單的方法。把瀏覽器視窗慢慢縮小，觀察版面在哪裡開始不舒服。
- 使用開發人員工具的裝置模擬：在 Chrome 或 Edge 按 F12，再按 Ctrl＋Shift＋M（或點工具列上的「切換裝置工具列」圖示），就能選擇各種手機、平板的尺寸預覽。Firefox 也可用 Ctrl＋Shift＋M 開啟「回應式設計模式」。
- 用真實的手機測試：模擬器無法完全取代實機。等你把網頁上傳到網站空間後，用自己的手機實際開啟看看，特別留意文字大小與按鈕好不好點。
新手常見問題
- 手機上看起來是縮小的電腦版：檢查
<head>裡有沒有 viewport 那行<meta>，這是最常見的原因。 - 畫面出現橫向捲軸：通常是某個元素用了固定的像素寬度，比螢幕還寬。找出是哪個元素，改用
%或max-width: 100%。圖片則記得加上img { max-width: 100%; height: auto; }。 - 媒體查詢沒有生效：確認括號與大括號有成對、
@media寫在被它覆蓋的規則「後面」（CSS 後寫的會蓋掉先寫的）。 - min-width 與 max-width 搞混：
min-width是「寬度至少」，用在行動優先，由小到大；max-width則是「寬度至多」，用在電腦優先，由大到小。同一份 CSS 盡量只選一種寫法，才不會越寫越亂。 - 手機上字太小、按鈕不好點：內文字級建議不要小於 16 像素（1rem），按鈕與連結的可點區域，建議至少約 44 像素高。
小練習：讓網頁更能適應各種螢幕
- 在卡片裡放一張圖片，加上
img { max-width: 100%; height: auto; }，拉動視窗確認圖片不會超出卡片。 - 把
minmax(220px, 1fr)的 220 改成 160 與 300，觀察欄數有什麼不同。 - 替頁首加上選單，電腦版橫向排列，手機版（小於 600px）改成直向堆疊。
- 用
@media (min-width: 960px)，替電腦版加上一個側邊欄，手機版則讓側邊欄移到內容下方。 - 挑戰：把前面幾篇做的課表放進 RWD 網頁，並讓表格在小螢幕時可以左右捲動（提示：把表格包在一個加上
overflow-x: auto的<div>裡）。
結語
RWD 的核心觀念是：設定 viewport，用彈性單位取代固定寬度，再靠 Grid 與媒體查詢，讓版面隨螢幕寬度自動調整。今天你學會了 max-width、rem、clamp()、CSS Grid、行動優先的媒體查詢，以及不靠斷點的 auto-fit，這些是現代網頁設計的基本功。
下一步，可以把整個系列做的成果整合成一個完整的個人網站，並學習如何把網站上傳到網路空間，讓全世界的人都能看到你的作品。
沒有留言:
張貼留言