RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學

打開網站，在電腦上看很正常，用手機看卻整頁縮成一小塊、字小到要放大才看得到，或是要左右滑才看得完——這就是網頁沒有做好 RWD。

RWD（Responsive Web Design，響應式網頁設計）指的是同一個網頁，會依照螢幕寬度自動調整版面：手機上是單欄、字級適中；平板、電腦上再展開成多欄。現在大部分的訪客都是用手機上網，Google 也是以手機版網頁作為收錄和排名的主要依據（行動優先索引），RWD 已經是網頁設計的基本條件。

這篇整理做出 RWD 網頁的四個關鍵，每一項都附上可以直接使用的程式碼。

關鍵一：加上 viewport 設定

這是最重要、也最常被漏掉的一行。在網頁的 <head> 裡加上：

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

沒有這一行，手機瀏覽器會假設網頁是給電腦看的，先用大約 980px 的寬度排版、再整個縮小塞進螢幕，後面寫的所有 RWD 語法都會失效。

舊版寫法常見的兩個錯誤

網路上流傳的舊寫法常長這樣：

<!-- 不建議 -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

問題有兩個：

1. 分隔符號要用逗號，不是分號。
2. 不要禁止縮放：maximum-scale=1.0、user-scalable=0 會讓使用者沒辦法用兩指放大，對視力不好的人很不友善，也不符合無障礙網頁的建議。iPhone 的 Safari 其實早就會忽略這個設定，所以只會在其他瀏覽器造成困擾。

用最上面那一行標準寫法就夠了。

關鍵二：圖片、影片自動縮放

圖片如果寫死寬度，在手機上就會超出畫面、出現橫向捲軸。加上這段 CSS，圖片最寬只會跟外框一樣寬，而且等比例縮放：

img,
video {
  max-width: 100%;
  height: auto;
}

進階：依螢幕給不同大小的圖

手機不需要下載給大螢幕用的大圖。用 srcset 和 sizes 準備幾種尺寸，瀏覽器會自己挑最適合的那張，手機版網頁可以快很多：

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(min-width: 1200px) 800px, 100vw"
  alt="作品照片"
  width="800"
  height="533">

width、height 寫圖片原始比例即可，瀏覽器會先保留位置，圖片載入時版面才不會跳動。

關鍵三：用媒體查詢（Media Query）切換版面

媒體查詢讓你依照螢幕寬度套用不同的 CSS。建議用「手機優先」的寫法：先寫手機版，再用 min-width 往大螢幕加樣式。

例如一組卡片，手機一欄、平板兩欄、電腦三欄：

.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

斷點要設多少？

常見的切法是：

• 手機：767px 以下
• 平板：768px～1199px
• 電腦：1200px 以上

不過斷點不用死背，最好的方法是把瀏覽器視窗慢慢拉窄，哪裡開始擠、開始跑版，就在那裡加斷點。

關鍵四：用彈性單位，少寫固定的 px

版面寬度用百分比或 fr、字級用 rem，畫面縮放時比例才會一致。標題字級還可以用 clamp()，讓字在小螢幕自動變小、大螢幕自動變大，不用每個斷點都重寫：

h1 {
  /* 最小 28px,最大 48px,中間隨螢幕寬度變化 */
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

.container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

.container 那一行的意思是：寬度最多 1200px，而且左右至少各留 16px，手機上文字不會貼齊螢幕邊緣。

上線前的手機版檢查清單

• <head> 有標準的 viewport 設定，而且沒有禁止縮放
• 手機上沒有橫向捲軸（常見兇手：寫死寬度的圖片、表格、iframe、太長的網址）
• 內文字級在手機上至少 16px，不用放大就能閱讀
• 按鈕、連結夠大、彼此不要太近，手指點得到
• 表格在手機上可以左右捲動，或改成上下排列
• 選單在手機上改成漢堡選單，而且點得開、關得掉
• 用 Chrome 開發者工具（按 F12，再按 Ctrl + Shift + M）切換各種手機尺寸看過一輪
• 用 PageSpeed Insights 檢查手機版的速度與問題

Google 以前的「行動裝置相容性測試」工具已經在 2023 年底停用，現在用 PageSpeed Insights 或 Chrome 的 Lighthouse 檢查即可。

延伸閱讀

• CSS 圖片填滿 div 不變形：object-fit: cover 用法與固定比例寫法
• CSS 垂直置中最簡單的方法：align-content: center 一行搞定

舊網站在手機上跑版嚴重的話，一直補 CSS 往往越補越亂，重新規劃一版反而省事。正威網路行銷的基隆網頁設計服務提供 RWD 響應式網站設計，也服務台北與全台客戶，歡迎來聊聊。