Day 14 RWD 設定：手機版、平板版調整

今天的核心工作是讓網站在不同裝置上都能保持良好的使用體驗，正式進入RWD（Responsive Web Design，響應式網頁設計)的調整階段。隨著越來越多玩家透過手機或平板遊玩，網站若僅針對桌面版設計，將導致排版走位、字體過小或按鈕難以點擊等問題。因此，這一天的目標是根據既有的版型與配色，優化各種螢幕尺寸的呈現方式，確保遊戲網站在桌機、平板與手機上皆能順暢互動。

一、規劃斷點（Breakpoints）
在開始寫 CSS 前，需先決定響應式設計的主要斷點。
桌機版（Desktop）：寬度 ≥ 1024px
平板版（Tablet）：768px ~ 1023px
手機版（Mobile）：≤ 767px

這些數值並非絕對，但它們是目前主流裝置最常見的參考範圍。
在 CSS 中，我們會透過 @media 來撰寫對應條件，例如：

/* 平板調整 */
@media (max-width: 1023px) {
  .game-container {
    padding: 20px;
    grid-template-columns: 1fr 1fr;
  }
}

/* 手機調整 */
@media (max-width: 767px) {
  .game-container {
    padding: 10px;
    grid-template-columns: 1fr;
  }
}

透過這種方式，可以針對不同裝置寬度，調整網頁元素的排列與大小。

二、彈性排版與容器設計
在 RWD 中，固定的寬度設定（如 width: 800px）容易導致小螢幕無法正常顯示，因此要改用百分比 (%)、彈性單位（vw、vh、em、rem）或Flexbox / Grid來控制排版：
Flexbox：適合一維的橫向或縱向排列，例如導覽列（Navbar）或按鈕列。
CSS Grid：適合二維網格，例如遊戲關卡選擇或翻牌遊戲的卡片區域。

例如，將原本桌面版三欄的版面，在平板改成兩欄、手機改成單欄：

.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1023px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .grid-cards {
    grid-template-columns: 1fr;
  }
}

三、字體大小與間距調整
螢幕越小，字體與行距需要相應縮小，但仍需保持可讀性：
標題：桌機版 h1 48px → 平板 36px → 手機 28px
內文：桌機版 18px → 平板 16px → 手機 14px
行距（line-height）應隨字體比例調整，以避免文字擁擠。
例如：

@media (max-width: 767px) {
  h1 { font-size: 28px; }
  p  { font-size: 14px; line-height: 1.6; }
}

同時，按鈕區域也要保留足夠的點擊空間（至少 40px 高），讓玩家在手機上操作更方便。

四、圖片與背景自適應
圖片與背景若使用固定寬度會導致溢出或被裁切，建議設定：

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

這樣圖片會根據容器大小縮放，而不會超出螢幕範圍。
如果背景採用漸層或圖案，也可以使用 background-size: cover;，確保在不同解析度下維持美觀。

五、導覽列與互動元件優化
手機與平板使用者通常需要更直覺的操作：
漢堡選單（Hamburger Menu）：在手機版導覽列中，將桌面版的水平選單收合為可展開的側邊選單。
按鈕距離：避免按鈕過於靠近，預留至少 8~12px 的間隔，以防誤觸。
彈窗（Modal）尺寸：縮小寬度並置中，確保彈窗不會超出螢幕。

六、實際測試與細節微調

完成 CSS 撰寫後，需在多種裝置或模擬器中測試：
使用Chrome DevTools模擬 iPhone、iPad、Galaxy 等裝置。
測試橫向與直向切換時，排版是否自動調整。
測試各種遊戲互動（例如按鈕點擊、翻牌動畫），確保動畫在小螢幕下仍順暢無誤。

今日成果
完成網站的手機版與平板版響應式調整，確保所有版面在不同解析度下都能清晰呈現、字體易讀、操作順手。經過這一步，遊戲網站正式跨越單一裝置的限制，讓玩家無論是用桌機大螢幕進行長時間挑戰，或是在手機上隨時隨地遊玩，都能享受一致且舒適的體驗。透過 RWD 的實作，我們不僅提升了使用者體驗，也為網站的正式上線奠定更穩固的基礎。