Studio Two 編輯器:設定元件大小
本文適用於 2026 年 11 月推出的全新 Studio Two 編輯器。若不確定目前使用的是 Studio 編輯器還是 Studio Two 編輯器,請在此查看更多資訊。
Studio Two 編輯器可精確設定每個元件的大小,讓設計自動適應任何裝置。您可在畫布或檢驗器面板中調整大小,設定元件的精確尺寸。
調整大小時,畫面會顯示 px*,這是以像素顯示的單位。系統會根據元件的回應式行為,依各斷點縮放大小。如果預設行為不符合設計需求,可以切換行為,或開啟進階設定,直接控制寬度和高度。
調整元件大小
請依偏好的設計方式選擇元件大小調整方法:
在畫布上:點擊頁面上的元件加以選擇,然後拖曳側邊控制點,直到元件達到所需大小。拖曳時,可以查看元件以像素為單位的精確大小。

在檢驗器面板中:點擊元件並開啟檢驗器面板,即可查看及變更精確的寬度和高度。

使用 px* 測量單位
檢驗器面板的「大小」區段提供 Studio Two 編輯器專屬的相對測量單位──px*。
「px」旁的星號(*)表示大小會依目前使用的斷點而定。例如,從桌面斷點切換至行動裝置斷點時,元件以 px* 表示的寬度和高度也會相應縮小。

px* 代表像素值,但系統實際採用回應式方式計算尺寸。將游標懸停在面板中的 px* 上,即可查看計算方式和目前使用的回應式尺寸單位(例如百分比、外觀比例等)。

選擇回應式行為
設定回應式行為,決定元件是否會在不同斷點調整大小,以及調整方式。每個元件一開始都會套用預設行為,但可以切換成更符合設計需求的行為。
變更元件的回應式行為:
選擇相關元件。
點擊編輯器右上方的「開啟檢驗器」圖示 。

點擊「設計」索引標籤。
在「大小」下方,點擊「回應式行為」下拉式選單。
選擇新的回應式行為。

將游標懸停在下拉式選單的選項上,即可查看呈現效果的動畫。
進階大小設定
若要直接控制元件的尺寸(例如像素、% 或 vh),而不交由 px* 和回應式行為決定,請使用進階設定。
啟用進階設定後,設定會套用至所選元件的所有斷點。該元件會維持啟用進階設定模式,方便隨時存取;也可隨時停用。
啟用進階設定:
選擇相關元件。
點擊編輯器右上方的開啟檢驗器圖示 。

(在檢驗器中)點擊右上方的更多操作圖示
。啟用進階設定旁的切換按鈕。

視需要編輯尺寸:寬度、高度、最小值和最大值。
提示:點擊檢驗器中的單位,即可切換成其他單位(例如從像素切換成 %)。系統隨即開啟清單,顯示該元件可用的測量單位。

。