昨天才剛讓 Flexbox 跟 Grid 和平共處。

今天想說來看看之前做的版面。

電腦上看起來：

嗯！不錯不錯，滿漂亮的嘛～

結果把瀏覽器視窗縮小……

蛤？？？

卡片擠成一團、文字開始亂跑，甚至還出現橫向捲軸。

不是欸，我只是把螢幕縮小，你怎麼整個人都變形了 ==

所以今天決定來看看 RWD（Responsive Web Design，響應式網頁設計）。

至少不要電腦版是一回事，手機版又變成另一個世界 XD

先來看看問題出在哪

假設今天有三張卡片：
html:

<div class="cards">
  <div class="card">卡片 1</div>
  <div class="card">卡片 2</div>
  <div class="card">卡片 3</div>
</div>

CSS：

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

CSS：

.card {
  padding: 30px;
  border: 2px solid black;
  text-align: center;
}

電腦版看起來很正常。

三張卡片乖乖排成一排。

很好，大家都有自己的位置。

但當螢幕越來越窄，三欄也會跟著被壓縮。

如果卡片裡面還有圖片、長文字或固定寬度的內容，就可能開始擠不下。

這時候我才發現：

原來網頁不是電腦版做好，就代表手機版也會自動長得很好看。

Media Query：螢幕小了就換個站法

這時候就可以請出：
css:

@media

簡單來說，就是根據不同的顯示條件，套用不同的 CSS。

例如：
css:

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

當視窗寬度不超過 768px 時，就把原本的三欄改成兩欄。

如果再縮小一點：
css:

@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

就變成一欄。

這樣卡片就不用在手機上硬擠三個位置。

好啦，螢幕都這麼小了，就不要再堅持三個人一起坐了 XD

不過 768px、480px 只是這次測試使用的分界點，不是所有網頁都一定要照這兩個數字設定。

實際還是要看自己的內容在哪個寬度開始排不下，再決定什麼時候調整版面。

其實也可以讓 Grid 自己看著辦

既然昨天才剛跟 Grid 認識，今天就順便試試另一種寫法：
css:

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 20px;
}

這段看起來有點長。

但主要意思就是：

每欄盡量保留 200px 的空間，放得下就多排幾欄，放不下就減少欄數。

其中：

auto-fit：根據容器可用空間安排欄數。

minmax()：設定欄位可以使用的最小與最大尺寸。

min(100%, 200px)：避免容器比 200px 還窄時，欄位仍硬撐到 200px。

這樣就不用每次都自己指定：

電腦三欄、平板兩欄、手機一欄。

Grid 會依照空間自動調整。

欸！原來你還會自己找位置坐喔 XD

今天順便打開 DevTools 看看

以前在電腦上做完網頁，很容易覺得：

「嗯，畫面正常，收工！」

但今天決定順便用 Chrome DevTools 測試不同螢幕尺寸。

按下 F12 開啟開發者工具，再點選裝置工具列，或直接按：

Ctrl + Shift + M

就可以切換不同的裝置尺寸。

接著把畫面從寬慢慢縮小，看看卡片什麼時候開始擠在一起。

這次主要想確認：

• 卡片會不會隨著螢幕大小調整欄數？
• 文字有沒有被擠到看不清楚？
• 有沒有不必要的橫向捲軸？
• 手機版的內容會不會超出畫面？

至少不要自己在電腦上看得很開心，結果別人用手機打開直接傻眼。

今天的小心得

以前做版面的時候，可能比較容易先想：

電腦版要長怎樣？

但今天重新整理 RWD 之後，覺得其實應該多想一下：

如果畫面變小，這些東西要怎麼重新排列？

RWD 也不是單純把所有東西縮小就好。

有些內容需要換行，有些卡片需要減少欄數，甚至有些排版方式在手機上可能就不適合繼續使用。

所以今天先幫自己記住：

不要等到手機版爆炸，才開始想怎麼救它。

不然電腦上美美的，手機一打開卻直接毀容。

這落差真的母湯 XD

Day 11，完成！

明天再來看看其他想挑戰的東西。

畢竟這 30 天的進度，本來就是做到哪、寫到哪。

先不要把未來的自己逼太緊 XD