本篇文章目錄

1. 前言：什麼是 RWD？為什麼醫藥健康工具極度依賴手機端體驗？
2. 行動優先 (Mobile-First) vs. 桌面優先 (Desktop-First) 的思維選擇
3. 實戰切版：用 @media 媒體查詢打造雙欄轉單欄的表單網格
4. 行動端細節微調：觸控目標 (Touch Targets) 與字型尺寸優化
5. 結語

一、 前言：什麼是 RWD？為什麼醫藥健康工具極度依賴手機端體驗？

RWD（Responsive Web Design，響應式網頁設計） 是指網頁能夠根據使用者所使用的裝置（桌機、平板、手機）螢幕寬度，自動調整佈局與元件尺寸的一質化設計方式。

對於《醫藥健康小工具箱》而言，超過 70% 的使用者很可能是在手機上進行操作（例如：在藥局購買兒童退燒藥時當場計算劑量、或是給藥前用手機查看用藥時間表）。如果手機畫面出現橫向滾動條、字體太小，或是按鈕太擠容易誤觸，將大幅降低工具的實用性！

今天我們將透過 CSS 原生的 @media 媒體查詢，讓我們的馬卡龍工具箱在任何螢幕上都能流暢無阻！

二、 實戰切版：用 @media 媒體查詢打造雙欄轉單欄

在 Day 06 中，我們使用了 grid-template-columns: 1fr 1fr; 建立了預設的左右雙欄表單。然而在螢幕寬度小於 600px 的手機上，兩個輸入框硬塞在同一行會顯得極為擁擠。

我們透過 @media (max-width: 600px) 斷點（Breakpoint），將網格改為單欄展示：

/components.css

三、 行動端細節微調：觸控目標 (Touch Targets) 與字型防縮放

除了排版欄位變化外，行動端的無障礙體驗 (a11y) 還包含觸控舒適度與防誤觸設計：

1. 符合 WCAG 規範的觸控大小

根據無障礙設計規範，手機上的可點擊目標（按鈕、輸入框、下拉選單）高度最好不低於 44px，以利手部較不靈敏或年長的族群輕鬆點擊：

/components.css

@media (max-width: 600px) {
  input, select, .btn {
    min-height: 44px; /* 確保手指輕鬆點擊不誤觸 */
  }
}

2. 防止 iOS Safari 自動放大字體

在 iPhone 上，如果 <input> 的 font-size 小於 16px，點擊輸入框時 Safari 瀏覽器會強制放大整個畫面，導致版型跳動。我們確保手機端字型不低於 16px（或 1rem）：

/components.css

@media (max-width: 600px) {
  input, select {
    font-size: 1rem; /* 防止 iOS 點擊輸入框時自動縮放畫面 */
  }
}

四、 觀念梳理：這段 @media 做了什麼？

1. @media (max-width: 600px)：告訴瀏覽器「當視窗寬度比 600px 還小時，執行這個大括號裡面的覆蓋 CSS」。
2. grid-template-columns: 1fr：把原本左右各半的雙欄拆掉，讓「身高」與「體重」自動改為上下堆疊，輸入區域頓時變得寬敞好填寫！
3. flex: 1 1 auto：讓分頁按鈕在手機上可以根據字數自動調整寬度，維持一到兩行整齊排列，不會超出畫面產生水平滾動條。

五、 結語

今天我們成功透過 @media 媒體查詢，讓《醫藥健康小工具箱》具備了靈活適應各種螢幕規格的 RWD 響應式能力，不管是使用電腦還是手機，都能享有流暢的馬卡龍質感體驗！