iT邦幫忙

2025 iThome 鐵人賽

DAY 15
0

Day 15 的挑戰 focus 在 全站 RWD 檢查與微調。依序測試桌機、平板與手機版本,針對排版、字體、圖片大小與互動細節進行調整,確保在不同螢幕尺寸下都有良好的閱讀體驗。以下是檢查後的調整清單:

  • Navbar
    • [ ] 更新 navbar ui
  • Intro section
    • [V] 縮短文字,讓版面更簡潔
    • [V] 手機版圖片放大,視覺更清晰
    • [V] 平板版調整為左右排列,顯示更平衡
    • [ ] 手機版背景圖微怪
  • Skills section
    • [V] 加上 top 的位置錯落效果
    • [V] Work Experience & Softskills 平板版並排顯示
    • [V] Softskills padding 間距縮小,避免留白過多
  • Typography
    • [V] text-h6-regular 改為 16px,手機版閱讀更舒適
    • [V] 按鈕文字放大
  • Projects
    • [V] Project card 加上「上次更新時間」
    • [V] View More 加上 cursor pointer,提升互動感
  • Personal information
    • [V] 手機版文字加粗體,增加可讀性
    • [V] 聯絡我按鈕加上 margin-top,留白更自然

今天主要專注在 字體大小、間距控制、以及元素排列,讓整體設計更乾淨、好讀。剩下小小的也可以邊做邊調整。


上一篇
Day 14 表單進階(Google email 整合)
下一篇
Day 16 圖片最佳化 Nuxt Image
系列文
《運用通勤時間打造線上履歷作品集:30 天 Nuxt 自我挑戰》16
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言