iT邦幫忙

2025 iThome 鐵人賽

DAY 30
0
Modern Web

程式煉金術:Bug退散!前端驅魔記系列 第 30

Day 30 - RWD 響應式設計與結語

  • 分享至 

  • xImage
  •  

學習目標

  • 理解 RWD(Responsive Web Design)核心概念
  • 學會使用 @media 媒體查詢調整不同裝置版面
  • 使用彈性單位(%, vw, vh, rem)打造自適應設計
  • 結合 Grid 與 Flexbox 實現多裝置兼容布局
  • 回顧整個 30 天 HTML × CSS 的學習歷程
body {
  margin: 0;
  font-family: "Microsoft JhengHei", sans-serif;
}

.header, .footer {
  background: #3498db;
  color: white;
  text-align: center;
  padding: 15px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 20px;
}

.card {
  background: #f4f6f8;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  font-weight: bold;
}

/* 平板 */
@media (max-width: 992px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

/* 手機 */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

常見錯誤與修正

  • ❌ 只在桌機測試版面 → ✅ 同時檢查手機與平板顯示效果
  • ❌ 固定 px 尺寸 → ✅ 改用 %vwvhrem 提升彈性
  • ❌ 忽略圖片縮放 → ✅ 使用 max-width: 100% 保持等比縮放
  • ❌ 寫太多 Media Query → ✅ 結構規劃清楚,只需針對關鍵斷點調整

今日小挑戰(可交付)

  • [ ] 製作一個能在手機與桌機正常顯示的網頁版面
  • [ ] 使用 @media 設定三個斷點(手機、平板、桌機)
  • [ ] 測試 vwvh 單位的應用效果
  • [ ] 嘗試讓圖片與文字能隨螢幕自動縮放
  • [ ] 將前幾天練習的版面改造成 RWD 版本

終於來到第 30 天完成這趟前端煉成之旅。現在能運用 Grid、Flex、RWD 建出完整網頁,我真的感受到自己的成長。
RWD 的概念讓我理解,設計不是為某一種螢幕服務,而是為「所有使用者」打造體驗。當畫面能自然隨裝置調整時,那種順暢的感覺,真的很有成就感。
回顧整個月的練習,我從語法記憶走向理解架構,從跟著抄到能自己規劃。這 30 天不只是前端學習,更是一場「專注力」與「耐心」的修煉。
接下來我想挑戰更進階的部分,像是動畫、互動效果,甚至開始學 JavaScript。
因為我知道——這一切的起點,都是從這 30 天的 HTML × CSS 打下的基礎。


上一篇
Day 29 - Grid 進階:自動排列與範圍控制
系列文
程式煉金術:Bug退散!前端驅魔記30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言