Wix Studio 編輯器：跨斷點設計
3 分鐘
Wix Studio 編輯器讓您能針對各個斷點量身打造網站，確保網站始終呈現最佳外觀。斷點是畫面尺寸範圍，代表訪客常用的各種畫面和裝置（例如：平板、行動裝置）。
在桌面斷點建立的設計會套用至平板和行動裝置。然而，您可建立覆寫以讓設計符合較小的畫面。點擊頂端的斷點圖示即可立即開始。
提示：
您可為客戶網站每個頁面上的各個斷點設定預設 編輯大小（畫面寬度）。
前往 Wix Studio 學院 檢查更多 Wix Studio 線上研討會、教學和課程。
定義斷點
Wix Studio 編輯器內建 3 個斷點，您可隨時自訂並重新界定：
- 桌面：1001 像素以上
- 平板：751 像素 - 1000 像素
- 行動裝置：320 像素 - 750 像素
最多可新增 3 個額外斷點，讓設計更精確地符合特定畫面尺寸。
您可為每個網站頁面和每個 全域區段 分別界定斷點。這表示全域區段與其所在頁面可擁有完全不同的斷點。
例如，下方頁面界定了 5 個斷點：
……而該頁面上的全域頁首則界定了 3 個斷點：
提示：
網站訪客看到的斷點取決於其視窗寬度。例如，iPad Pro 使用者（即 1024 像素寬度）將看到桌面斷點（1001 像素及以上）。這也會因直向或橫向模式而異，因為每種模式的畫面寬度不同，可能會落入不同的斷點範圍。
階層式設計
Studio 編輯器在跨斷點設計時採用階層式概念。在較大斷點上進行的變更會套用至較小斷點，但較小斷點上的變更不會影響較大斷點。
例如，在桌面設計為紫色的按鈕，在平板和行動裝置上也會自動顯示為紫色。若在行動裝置上變更其色彩，該按鈕在平板和桌面仍會是紫色。
請留意：
部分變更會套用至所有斷點，例如取代或刪除元件。請在下方區段中瞭解更多關於此類變更的資訊。
已建立額外的桌面斷點？
若刪除第 2 大的斷點，最大斷點的設定會自動套用至較小的斷點 ── 即使您已 建立覆寫。例如，僅在最大斷點隱藏的元件也會在較小斷點上顯示為隱藏。若要解決此問題，請重新建立覆寫。
套用至所有斷點的變更
某些類型的小部件會自動套用至所有斷點，且無法針對特定檢視區進行自訂。
資料變更
編輯元件內容時，實際上是在變更其資料。例如，變更元件的連結或圖片來源會套用至所有斷點。
另一個範例是取代或從頁面刪除元件時，該元件會自動在所有斷點上被取代／刪除。
您知道嗎？
您可針對特定斷點隱藏元件。前往相關斷點，右鍵點擊元件並選擇 隱藏。
結構變更
變更元件在頁面階層中的位置。例如，將元件「堆疊」在一起或將元件移動到不同的 儲存格 時，即是在變更頁面結構，且此變更會反映在所有斷點中。
使用斷點建立覆寫
當您在特定斷點上變更元件設計時，即會發生覆寫。這表示該元件不再從上方較大的斷點提取設計金額。然而，這些覆寫仍會套用至較小的斷點。
您可建立 2 種覆寫類型：
- 設計：變更元件屬性，例如色彩、邊框和字型。
- 版面配置：變更元件的位置和大小，前提是未移動至不同的父元件。
提示：
Wix Studio 編輯器中的元件和區段皆內建回應式行為。這可控制元件在較小斷點上調整大小的方式，因此無需擔心手動設定所有內容。
在所有斷點使用覆寫
若喜歡已建立的覆寫，您可將其用於所有斷點。這會將變更同時套用至較大和較小的斷點，讓網站外觀在每個畫面尺寸上保持一致。
若要在所有斷點使用覆寫：
- 在編輯器中開啟相關斷點。
- 選擇相關元件。
- 點擊「尚有...項操作」圖示
。 - 選擇「在所有斷點上使用」。
移除特定斷點的設計覆寫
您可隨時將元件的設計和版面配置重設回最大斷點上的屬性。
較小斷點上的元件屬性不會受到影響，僅會重設包含該元件的斷點。例如，若刪除平板上的覆寫，並不會影響行動裝置。
若要移除斷點上的設計覆寫：
- 在編輯器中開啟相關斷點。
- 選擇相關元件。
提示：您可直接在畫布上選擇，或透過圖層面板選擇。 - 點擊尚有...項操作圖示。
- 點擊移除覆寫。
您知道嗎？
您可使用 回應式 AI 工具 快速最佳化所有斷點的區段版面配置。
常見問題
點擊下方問題以瞭解更多資訊。
如何確保網站版面配置在行動裝置和桌面顯示正確？
如何防止行動裝置版網站影響桌面版？
如何修正行動裝置上元件重疊的問題？
如何修正過大的間隙或多餘的空白（特別是在行動裝置上）？
為什麼圖庫在行動裝置上顯示過大？該如何修正？