開始使用 Wix以 Wix 建立網站和商家。歡迎使用我們的 AI 工具來建立網站、自訂範本或雇用專業人員,樹立網上形象。
建立網站了解如何以 Wix 工具建立並管理網站。您也可在此找到更多關於 AI 工具、網站訪客隱私權和無障礙的資訊。
帳戶與帳單檢閱帳戶設定,設定訂閱與方案,查看請款單。
使用 Wix 行動應用程式歡迎使用 Wix 行動應用程式,隨時隨地處理業務,並以專屬應用程式吸引網站會員互動。
連結網域以逐步指南了解如何購買、連結或轉移網站網域,並學習如何確保網站資料安全。
Studio、夥伴與 Enterprise善用 Studio 或 Enterprise 帳戶,以進階功能提升效率。
需要協助?尋找網站與技術支援,了解已知問題,或聯絡我們要求協助。
placeholder-preview-image
Wix Learn以課程和教學加強技能。
Wix 部落格學習網頁設計、行銷等範疇的秘訣。
SEO 學習中心學習如何提升來自搜尋引擎的自然網站流量。
網站開發以全端平台建立自訂網站。
placeholder-preview-image

Studio 編輯器:建立回應式網站


全新 Studio 編輯器是專業人員建立全回應式網站的終極平台,讓網站在各種畫面和裝置上都能呈現出色效果。平台提供尖端功能,協助快速、精準地建立回應式網站。

Studio 編輯器提供多種精心挑選的工具,可簡化設計流程,讓專案設計更輕鬆、更有效率,並帶來出色成果。
前往 Wix Studio 學院,查看更多 Wix Studio 線上講座、教學和課程。

各斷點的自訂設計

Studio 編輯器可讓您針對各個斷點調整網站,使網站始終保持出色外觀。斷點是畫面寬度範圍,代表訪客可能使用的畫面和裝置(例如平板、行動裝置)。
Studio 編輯器採用串聯概念進行跨斷點設計。在較大斷點所做的變更會套用至較小斷點,但較小斷點的變更不會影響較大斷點。
GIF 顯示點擊頂端不同斷點時,網站設計如何隨之變化

AI 回應式區段設計

運用 AI 的強大功能,只要點擊一次,即可讓區段適用於所有畫面大小。回應式 AI 工具會識別相關的元件群組,並為各群組套用最合適的版面配置工具(例如堆疊、格線)。
回應式 AI 工具產生的預覽螢幕截圖,其中醒目顯示套用或捨棄變更的選項

跨斷點自動調整大小

設計網站時,各項元件在每種畫面大小上都應呈現出色效果。以像素編輯元件大小,並選擇回應式行為,系統便會自動完成其餘調整。
GIF 顯示如何使用拖曳把手,在畫布上調整元件大小
每個元件都有預設的回應式行為(例如按比例調整),用來控制元件在其他畫面上的大小調整方式。如此可大幅加快設計流程,不必逐一前往每個斷點設定大小。
您可在檢驗器面板中,將元件的回應式行為變更為更符合需求的選項。
展開「回應式行為」下拉式選單及可用選項的螢幕截圖

各種畫面的元件設計適配

將元件設為按比例調整後,即可讓設計在每個畫面上都呈現理想效果。在檢驗器中啟用縮放屬性切換開關,系統便會自動完成調整。
「縮放屬性」切換開關的螢幕截圖;只有將回應式行為設為按比例調整時,才會顯示此開關
例如,若元件設有指定的邊框,邊框在小型畫面上可能顯得太粗且過於搶眼,在大型畫面上則可能幾乎看不見。啟用此切換開關後,只需在桌面版設定所需的設計即可。

文字自動與手動縮放

在 Studio 編輯器中,文字預設會依畫面大小自動按比例縮放。只需選擇桌面版的字型大小,系統就會自動完成其餘調整。您可設定最小值和最大值,避免文字因設計而顯得過小或過大。
若需更精確地控制文字縮放,請改選「自訂」。如此即可分別設定各個斷點的大小範圍。
檢驗器中「縮放文字」選項的畫面截圖,顯示斷點範圍的設定位置