響應式設計的 7 個 mobile-first 原則

2026 年台灣網站流量手機 vs 桌面是 65/35。但很多開發者還是先做桌面版，最後才「縮一下」變手機版。這篇分享 5 年作品集網站經驗濃縮的 7 個 mobile-first 原則，每個都解決一個具體問題。

1. 觸控目標 ≥ 44×44px

Apple HIG 跟 Google Material 都建議按鈕最小 44×44px（換算 CSS 約 2.75rem）。小於這個尺寸手指容易誤點。

button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 20px;
}

排例外：純裝飾的「關閉 X」可以小但要有 padding 擴大可點區域：

.close-btn {
  width: 24px; height: 24px;     /* 視覺尺寸 */
  padding: 10px;                  /* 可點區域 = 44×44 */
  box-sizing: content-box;
}

2. 字型最小 16px（避免 iOS 縮放）

iOS Safari 在 input 字型 < 16px 時會自動縮放整個畫面。這個行為使用者完全不要：

input, textarea, select {
  font-size: 16px;  /* 不要小於這個 */
}

對純展示文字，最小 14px。次要內容 12–13px 是可接受的下限，再小手機螢幕看不清。

3. viewport meta 必設

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

沒這行，手機會用 980px 桌面寬度模擬，整個 layout 縮小到看不清。

不要加 user-scalable=no — 影響無障礙，使用者無法 zoom。

4. 別用 px，用 rem

使用者可以在系統設定調整字型大小（無障礙考量）。如果你用 px，使用者放大不會有效果。改用 rem：

html { font-size: 16px; }  /* 1rem = 16px 預設 */
.title { font-size: 1.5rem; }   /* 24px */
.body  { font-size: 1rem; }      /* 16px */
.small { font-size: 0.875rem; }  /* 14px */

使用者把系統字型設為 18px → 你的網站全部按比例放大。

5. clamp() 取代 media query

傳統做法：

.title { font-size: 1.5rem; }
@media (min-width: 768px) { .title { font-size: 2rem; } }
@media (min-width: 1280px) { .title { font-size: 2.8rem; } }

新做法：

.title { font-size: clamp(1.5rem, 4.6vw, 2.8rem); }

一行代替三個 breakpoint。clamp(min, fluid, max) — 在大小之間流暢縮放。本站所有 h1 都用這個。

6. 效能 budget：手機網路慢

桌面光纖跑 100Mbps，手機 4G 平均 20Mbps，2G 地區可能 50Kbps。Mobile-first 的效能 budget：

達不到手機底線，整體網站體驗就崩。實測本站手機 FCP 0.9s。

7. 橫螢幕（landscape）考量

多數人忘記手機可以橫過來。橫螢幕下螢幕高度可能只剩 360px，hero 100vh 變得很怪：

.hero {
  min-height: 100vh;
}
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 360px; }  /* 不要強制 100vh */
}

Bonus：safe-area-inset

iPhone 有瀏海跟底部 home bar，預設網頁元素會被遮住。CSS env() 變數解決：

.fixed-bottom-button {
  bottom: env(safe-area-inset-bottom, 0);
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 12px);
}

還要在 viewport 加 viewport-fit 設定：

<meta name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Mobile-first 不是「先做手機」

常見誤解：mobile-first = 「我先做手機版，再做桌面」。其實是：

• CSS 預設值 = 手機樣式
• min-width media query 加桌面增強

/* 預設：手機 */
.grid { display: block; }

/* 平板以上：grid */
@media (min-width: 768px) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
}

反之 desktop-first 用 max-width，但因為手機是更受限的環境，從受限往上加才合理。

結語

2026 年的 mobile-first 不是「mobile-only」 — 是「以手機為起點，往桌面 progressively enhance」。這 7 個原則加上 CSS 現代特性（clamp、env、container queries）配合，做出來的網站手機體驗會明顯比 desktop-first 移植過來的好。