當你在 pxCode 中想要快速調整一個版面，並確保它在各種裝置下都不會跑版、維持穩定排版比例時，Responsive by Zoom 就非常適合使用。這個功能可以讓元件自動縮放而不影響內部內容結構。

最常見的應用情境是：只需調整一兩個段點，就能快速完成整體響應式排版，省去每個段點都要個別調整的繁瑣。

有了 Responsive by Zoom，只要設定 Global、MD 等主要段點的寬度，其他解析度就會依照相同比例自動縮放，既節省時間，又能穩定呈現不跑版的結果。

螢幕錄影 2025-04-09 下午3.16.44.mov

在 pxCode 中如何使用 Responsive by Zoom 功能？

pxCode 的 Responsive by Zoom 是一個透過 JavaScript 實作、用來保持元件寬高比的功能元件，你可以從 UI Library 中直接套用，讓元件在不同螢幕大小下仍保持比例不變。

操作步驟：

  1. 完成響應式設定與區塊結構

    在套用 Responsive by Zoom 之前，請先完成頁面內容的區塊結構，並針對主要解析度段點進行響應式設計（例如：Global、MD、2XS）。這樣可以確保縮放行為套用時，版型會依照既有設計準確呈現。

  2. 套用 UI Library

    選取整體外層區塊（通常是 root），在右鍵選單中選擇「Insert → UI Libraries」，會打開 UI Library 選單。在右側選擇 HTML 分類，然後在右側清單中點選 Responsive by Zoom。

    image.png

  3. 調整斷點寬度

    在右側樣式面板中，依序填入你在步驟 1 設定過的主要斷點（例如：Global、MD、2XS）對應的寬度值。其餘未設定的解析度會自動依照相同比例縮放。

    image.png

  4. 預覽與匯出

    切換至不同裝置預覽畫面，確認版面會依照設定比例自動縮放，保持畫面一致性。沒問題後，即可點選右上角「Get Code」匯出程式碼。