在第 18 天已經初步學習了 Media Queries，今天將更細緻的優化作品集頁面，確保它在各種尺寸的裝置上都能有良好的使用者體驗。

優化重點：

• 字體大小： 在手機上，字體可以適當調小，讓內容更容易一覽無遺。
• 區塊間距： 調整 margin 和 padding，讓區塊在小螢幕上不會顯得太擁擠。
• Flexbox/Grid 佈局： 改變 flex-direction 或 grid-template-columns，讓區塊在手機上變成單欄排列。

打開瀏覽器的開發者工具，切換到手機模式，然後逐一檢查頁面：導覽列、個人介紹、作品展示區、聯絡表單。
如果發現排版有問題，就使用 Media Queries 來修正。

CSS

@media (max-width: 768px) {
  /* 手機和平板的通用樣式 */
  .hero-section h1 {
    font-size: 32px;
  }
}
@media (max-width: 600px) {
  /* 僅手機的樣式 */
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .main-nav ul {
    flex-direction: column;
  }
}

這個優化過程需要一些耐心，但這能讓作品集更專業化的關鍵一步。

執行成果 :