許多人第一次在網頁上使用 Rive 時，都會遇到同樣的疑問：Rive 要怎麼做 RWD？

不同於傳統 HTML/CSS 可以輕鬆使用 Flex、Grid 或 Media Query 來處理響應式排版，Rive 是運行在 Canvas 上的向量動畫，處理方式完全不同。也因為如此，我們不能透過原有的 RWD 思維套用到 Rive 所要做的 RWD 當中，而是思考動畫該如何適應不同尺寸的畫面。

如果直接把同一份 Rive 檔案渲染到不同尺寸的容器中，常常會因為螢幕比例、解析度或容器長寬比不同，而產生留白過多、邊緣裁切、元件擠壓變形，或整體版面配置失衡等問題。尤其在從手機到平板、電腦，甚至橫版與直版切換時，問題特別明顯。

在開始實作前，你可以先透過幾個關鍵問題來釐清實作的方向：

• 這個動畫真的需要做 RWD嗎？還是只是單純的裝飾性動畫？
• 如果需要響應式設計，不同裝置之間的差異有多大？
  • 在排版上沒有太大差異，可透過畫面縮放來達到目的？
  • 這個動畫能不能接受輕微變形或被裁切？
  • 在排版上需要重新排列元件、調整間距、甚至改變整體結構 ？
  • 在排版上不同的裝置一份 .riv 是否可以容易達到？

Rive 官方其實提供了一套相當強大的 Responsive Layout 系統，讓設計師可以在編輯器裡直接定義響應規則。不過在實際專案中，大家會根據需求和複雜度，選擇適合的做法。目前常見的有三種主要實作方式。今天這篇文章，我就來詳細介紹這三種方法、各自的適用情境、優缺點，還有程式碼範例，幫助你快速找到最適合自己專案的解法。

方法一：從前端做等比縮放（Rive 端幾乎不需要修改）

在介紹 Rive 官方的 Responsive Layout 之前，我想先介紹一個我認為也是實務上最常見、成本最低的做法：等比例縮放（Scale）。

這種方式最大的特色，就是幾乎不需要修改 Rive 檔案，而是將 RWD 的工作交給前端處理。

如果當你今天遇到 UI 已經完成動畫，或專案時間有限，不希望重新調整 Rive 的排版，那麼只要透過前端設定 Fit 模式，就能讓動畫適應不同尺寸的畫面。

不過，要先建立一個觀念：

Scale 解決的是「大小」的問題，而不是「版面」的問題。

這個方法只是將整個 Artboard 一起放大或縮小，並不會改變元件之間的位置或排列方式。因此，當我們遇到手機版需要重新排列按鈕、調整資訊區塊的位置，這種方法就無法做到真正的響應式排版。

什麼情況適合使用？

以下幾種情境，我會優先考慮使用等比例縮放：

• 動畫主要是裝飾性元素，例如 Logo、角色、背景動畫或單一互動效果。
• 不同裝置之間的版面結構幾乎相同，只需要調整整體大小。
• 不需要重新排列元件，也不需要調整間距。
• 在開發時間有限的情況下，希望以最低的開發成本完成 RWD，不想額外調整 Rive 檔案。

實作方式

等比例縮放的實作方式相當簡單，不需要修改 Rive 檔案，只需要在前端透過 Layout 設定不同的 Fit 模式，就能控制動畫如何適應容器大小。

最常使用的有兩種模式：

• Fit.Contain：保持原始比例，完整顯示整個 Artboard，不足的空間會留下留白。
• Fit.Cover：保持原始比例並填滿整個容器，但超出範圍的內容可能會被裁切。

如果你的動畫內容不能被裁切，例如 Logo、UI 元件或資訊畫面，通常建議使用 Fit.Contain；
如果動畫偏向背景或裝飾效果，希望填滿整個畫面，則可以考慮使用 Fit.Cover。

實作上，只需要建立 Layout 並指定 fit 即可：

const riveInstance = new rive.Rive({
  src: "your-animation.riv",
  canvas: document.getElementById("rive-canvas"),
  autoplay: true,
  layout: new rive.Layout({
    fit: rive.Fit.Contain,     // 推薦
    // fit: rive.Fit.Cover,    // 填滿但可能裁切
    alignment: rive.Alignment.Center,
  }),
});

當瀏覽器視窗尺寸改變時，也別忘了記得呼叫 resizeDrawingSurfaceToCanvas() 讓動畫正確適應新的畫面大小：

window.addEventListener("resize", () => {
  riveInstance.resizeDrawingSurfaceToCanvas();
});

優缺點總結

• 優點：實作最簡單、開發成本最低，UI 端幾乎不用修改 Rive，只需前端設定就能快速適配不同螢幕尺寸。
• 缺點：只能調整整體大小，無法重新排列元件或優化版面，遇到複雜 UI 時容易出現留白、裁切，或小螢幕內容過小的問題。