CSS 垂直間距：百分比還是像素？響應式佈局的最佳實踐

核心建議：優先使用相對單位（百分比、vh、rem）

面對「onepage scroll」類全頁滾動插件，螢幕高度變化導致內容截斷或間距異常，**固定像素 (px) 是禍根**。百分比基於父容器高度計算，能隨視口縮放自適應，是響應式佈局的基礎選擇。

單位選擇對比

解決「內容截斷」與「間距不一」的實戰技巧

1. 容器設定 min-height: 100vh：確保每頁至少佔滿視口高度，內容超出時自然撐開，避免截斷。
2. 使用 Flexbox 或 Grid 佈局：替代浮動/定位，配合 gap、justify-content 實現彈性間距分配。
3. 媒體查詢微調極端尺寸：

   @media (max-height: 600px) {
     .section { padding-top: 5vh; padding-bottom: 5vh; }
   }

4. 插件配置檢查：onepage scroll 類插件常有 responsiveFallback 或 afterMove 回調，利用它們動態重算高度。

避坑指南

• 百分比 margin-top/bottom 參考的是**父元素寬度**（非高度），垂直間距請用 padding 或 vh。
• 大螢幕下間距過大？設定容器 max-width 並置中，配合 clamp() 限制間距範圍：padding: clamp(1rem, 5vh, 3rem)。
• 嵌套百分比會疊加放大，優先用 rem 建立全局節奏，局部微調用 vh。

拒絕像素硬編碼，擁抱相對單位與現代佈局，才能讓頁面在任何螢幕上優雅呼吸。