方法三：切換不同版本的 .riv 檔案（多版本設計）

如果前兩種方法都無法滿足需求，那麼最後一種做法，就是準備多份不同的 .riv 檔案，由前端根據裝置或螢幕尺寸來切換載入對應版本。

這種做法其實很接近網頁開發中的 Adaptive Design （適應性設計）的概念，也就是針對不同裝置準備不同版本的內容，再由前端依照條件選擇最適合的版本。

與 Layout 不同的是，它不是讓同一份 Rive 自動重新排版，而是直接使用不同的動畫檔案，因此不同裝置可以擁有完全不同的版面設計、動畫流程，甚至互動邏輯，設計上的自由度最高。

什麼情況適合使用？

以下幾種情境，我會優先考慮使用多版本 .riv：

• 手機版與桌機版的 UI 差異非常大， Layout 難以調整或效果不佳。
• 不同裝置需要不同的動畫流程或互動邏輯。
• 為了最佳化不同裝置的使用體驗，希望針對各種尺寸分別設計畫面。
• 可以接受維護多份 .riv 檔案。

實作方式

多版本 .riv 的做法不需要使用 Fit.Layout，而是由前端根據裝置條件，決定要載入哪一份動畫。

const getRiveSrc = () => {
  if (window.innerWidth < 768) return 'mobile.riv';  // 手機版
  else if (window.innerWidth < 1024) return 'tablet.riv';   // 平板版（可選）
  else return 'desktop.riv';   // 桌機版
};

再將回傳的檔案路徑傳入 new Rive() 的 src 即可。

除了依照螢幕寬度判斷，也可以搭配裝置類型、方向（直向／橫向）或其他需求，切換不同版本的動畫。

優缺點總結

• 優點：設計自由度最高，不同裝置之間可以擁有完全不同的版面、動畫流程與互動方式，不受單一 Layout 規則限制。
• 缺點：需要維護多份 .riv 檔案，每次修改動畫都可能需要同步更新所有版本，因此設計、測試與維護成本也是三種方法中最高的。

建議

如果你的專案中，手機版與桌機版已經是兩套完全不同的設計，那麼直接使用多版本的 .riv，反而比硬使用 Layout 更容易維護。但如果只是元件排列方式不同，我仍然會建議優先考慮 Layout，畢竟只需要維護一份 .riv 檔案，長期來看會更有效率。

一張圖可以說明你的問題 對應的方式

!photo_2026-07-09 09.45.41.jpeg

總結

其實，Rive 並沒有一種放諸四海皆準的 RWD 解法，重點不是哪一種方法最好，而是哪一種方法最適合你的專案需求。

如果只是希望動畫能適應不同螢幕尺寸，而手機版與桌機版的版面幾乎相同，那麼透過前端做**等比例縮放（Scale）**通常就已經足夠，也是開發成本最低的方式。

如果畫面中的元件需要根據不同尺寸重新排列，例如調整按鈕位置、改變資訊區塊的排列方式，則建議使用 Rive 官方提供的 Layout。雖然前期需要花一些時間規劃 Layout 與 Constraints，但只需維護一份 .riv 檔案，長期來看會是最容易維護的方案。

而當不同裝置之間已經是多種不同的設計，甚至連動畫流程、互動方式都不相同時，與其勉強使用 Layout，不如直接準備不同版本的 .riv 檔案，再由前端依照裝置載入對應版本，反而能降低實作上的複雜度。

最後想分享一個自己的想法：

先想需求，再選方案。不要一開始就認定「一定要用 Layout」，也不要為了追求「只有一份 .riv」而讓整個專案變得更複雜。選擇最符合專案需求、團隊開發方式與後續維護成本的方案，才是最好的 RWD 做法。