Studio 編輯器:回應式問題疑難排解
客戶網站在不同斷點上的顯示效果有問題嗎?Studio 編輯器提供多種工具,可處理不同畫面尺寸下的常見回應式問題,例如元件重疊、位置錯誤或未對齊。只要適當調整,即可建立精緻、專業,且在任何裝置上都能完美顯示的網站。
提示:
回應式檢查工具可協助找出並避免本文提及的問題,省去逐一檢查元件的麻煩。例如,此工具可偵測不必要的邊距、需要調整停駐方式的元件,以及未界定最小尺寸的文字等問題。
文字在特定斷點上顯示得太小
在較小的畫面上檢視客戶網站時,文字是否顯得太小?使用按比例調整的回應式行為和最大值/最小值設定,即可讓文字在各種畫面尺寸上保持理想效果。
選擇文字並開啟檢驗器面板。首先,將回應式行為設為按比例調整。接著,點擊設計下方的最大值/最小值,設定字型大小的最小值和最大值。

提示:
最大值/最小值設定會自動套用至較小的斷點,因此不必在桌面以外的斷點上進行變更。
元件在不同斷點上的位置錯誤
如果客戶網站上的元件在不同畫面尺寸下意外移位,通常是停駐和邊距設定所致。請按照以下步驟解決問題,讓元件維持在預期位置。
檢查元件的停駐設定
調整元件邊距
(固定行為區段)將元件邊距改為像素
多個元件不斷移位?
如果元件都位於同一個上層容器中(例如區段、儲存格等),可將元件堆疊,讓間距和對齊方式保持一致。
元件在不同斷點上未對齊
如果區段中的元件在畫面尺寸變更時未對齊或版面配置遭到破壞,通常是停駐或邊距設定不一致所致。
請按照以下步驟找出並修正問題,讓元件在各種畫面尺寸下都能正確對齊。
將元件停駐於同一側
統一邊距單位
檢查元件之間的關係
不同斷點下的元件重疊
排列元件時,元件在編輯器中的間距可能恰到好處,但在不同檢視區中查看已上線網站時卻發生重疊。這通常與元件的定位方式或回應式行為有關。
如果客戶網站上的元件在不同畫面尺寸下發生重疊,請按照以下步驟找出並修正問題。
檢查元件的定位與停駐設定
調整元件的回應式行為
檢查元件之間的關係

