電腦螢幕上，主視覺置中、標題大方，每個區塊的間距抓得剛剛好，這份版面看起來無可挑剔。換成手機打開同一個頁面，主圖卻被裁得只剩一半藏在螢幕外，底下三段文字全黏在一起，段落感整個消失。
這種落差很常見，多半不是設計出錯，而是版面只顧了電腦版，沒替平板、手機另外做微調。Statista 的統計顯示，行動裝置貢獻的流量早已超過全球網站流量的一半，Google 索引網頁看的也是行動版內容。Elementor 響應式設計，指的是同一份版面能依螢幕寬度分別套用不同的欄位大小、字級與顯示規則，讓桌機、平板、手機各自呈現最合適的樣子，而不是把桌機版硬塞進一個小螢幕裡。
接下來會從斷點設定、單一元件怎麼分裝置調整、哪些內容適合在手機隱藏，到字級間距要用哪種單位，一項一項拆開講，最後再看上線前該怎麼確認手機版真的沒問題。先從這種跑版最常見的成因講起。
電腦版排得好好的，為什麼手機版卻跑版？
不少人以為只要用 Elementor，版面就會自動跟著裝置調整，這個想法只對了一半。Elementor 確實有自動適應的部分，但真正決定不同裝置長什麼樣子的，是「斷點」（breakpoint）——畫面依螢幕寬度切成幾種裝置，各自套用一組數值。這幾組數值之間還有主從關係：桌機那組是預設基準，平板只會覆寫大約 1024 像素以下的部分，手機再覆寫大約 767 像素以下的部分。換句話說，只要平板、手機的欄位沒有另外設定過，就會直接沿用桌機那組值。
這也是為什麼常常出現「電腦版好好的，手機版卻跑版」的狀況，問題通常不是 Elementor 出錯，而是桌機那組設定用了不適合往下繼承的值。舉幾個最常見的例子：圖片或欄位設了固定的像素寬度，縮到手機這種只有三百多像素寬的螢幕時就直接超出畫面；標題與內文的字級、行高照搬桌機的尺寸，擠在窄欄位裡自然顯得擁擠；區塊的邊距、留白也是桌機的份量，手機版該收窄卻沒收窄，版面看起來鬆散又占位置。
找出問題出在哪一層，是把手機版救回來的第一步。接下來就從斷點本身怎麼設定講起。
Elementor 的斷點設定：預設三種到自訂裝置
根據 Elementor 官方文件，預設把畫面分成三種斷點：電腦版涵蓋 1024 像素以上的螢幕，平板落在 767 到 1024 像素之間，手機則是 767 像素以下。這三個範圍已經對應到市面上大部分桌機、平板、手機的實際尺寸，一般網站不用另外調整也能用。
要查看或修改這幾個斷點，可以打開任一頁面的 Elementor 編輯器，點左上角的選單圖示，進到網站設定裡的版面配置，展開斷點區塊，就能看到目前每個裝置對應的像素值，直接輸入新的數字再儲存即可。
如果站點有特殊需求，比如很多受眾習慣橫放平板瀏覽，或希望在超寬螢幕上限制內容寬度，進階版還能額外開啟四種自訂斷點：手機加大、平板加大、筆電、寬螢幕，讓斷點總數最多來到六種，可以更細緻地切分每一種螢幕寬度。不過斷點不是開越多越好，每加一種都代表之後要多維護一份設定，一般網站用預設三種、再視情況加一到兩種真正有需要的就夠用，貪多反而讓後續改版變得更複雜。
同一個元件，怎麼讓每個裝置分開調整？
要讓同一個元件在不同裝置呈現不一樣的樣子，操作順序很重要：
- 先在編輯器上方或左下角的裝置圖示，切到要調整的裝置檢視，例如切到手機模式。
- 選取要修改的元件，進到面板裡找到想調整的欄位。
- 點欄位旁邊的裝置圖示，確認目前正在編輯哪個裝置的值，再動手改，避免改錯層級連動到電腦版。
不必每個裝置都重新設一次同一個欄位。前面提過斷點之間有主從關係，沒有特別設定的裝置會直接繼承上一層的值，所以只要挑出「這個裝置真的需要不一樣」的欄位去調整就好。實務上最常需要分開設定的幾個地方是：區塊或欄位的邊距與留白（桌機的份量放到手機常常太寬）、寬度（桌機的固定像素寬度換到窄螢幕容易超版）、對齊方式（桌機置右的內容手機版可能改成置中更好讀），以及下面會細講的字級。
手機版收起某個區塊，關鍵在「進階→響應」的顯示設定
有些內容天生不適合直接縮小塞進手機螢幕，這時候比起硬調整大小，不如讓它在特定裝置乾脆不顯示。做法是選取要處理的元件或整個區塊，進到進階設定裡的響應選項，會看到一組顯示與隱藏的裝置切換，把不想顯示的裝置打開，那個裝置瀏覽時就不會看到這個內容。
常見的用法有幾種：桌機版一張完整的功能比較表格，手機版換成精簡條列，資訊量不變但排版更適合直式螢幕；主視覺橫幅桌機版是完整的一張，手機版則另外做一張直式裁切的版本替換上去，焦點主體才不會被裁掉；額外的補充說明文字，桌機版留著沒問題，手機版則先隱藏，讓版面聚焦在最重要的內容上，不一次塞太多字。
有個常被誤會的地方要先說清楚，被隱藏的內容其實還是會一起送到瀏覽器裡，只是不顯示出來而已，並不會讓手機版的載入速度變快。這個功能是拿來做內容取捨、決定哪個裝置看什麼的工具，不是效能優化的手段，如果目的是讓手機版載入更快，得靠別的方法處理，不能只靠隱藏元素解決。
字級和間距要怎麼設定，手機版才不會太擠？
字級和留白如果從頭到尾都用固定像素設定，在手機這種窄螢幕上最容易出問題，不是文字被擠得很密，就是留白比例跟裝置完全不成比例。Elementor 除了像素，還能用百分比、em、rem、vw、vh 這幾種相對單位：
- 百分比、vw：適合跟版面寬度有關的設定，例如欄位寬度、區塊留白，會跟著螢幕寬度等比例縮放。
- em、rem：適合字級相關的設定，只要調整一個基準值，底下用同一種單位的文字會一起等比例縮放，不用每個標題、每段內文分開改一次。
分裝置調整字級和留白時，桌機用比較大的字級與比較寬鬆的留白，平板略縮一階，手機再縮一階，邏輯就這麼簡單；幅度不用太劇烈，一次縮太多反而會讓版面在平板這個中間尺寸顯得突兀。內文字級尤其要注意下限，行動裝置的本文字級一般不建議低於通用可讀的最小尺寸，太小的字會逼使用者用手指放大畫面才看得清楚，這正好也是不少手機版「字擠成一團」的真正原因，不是字數太多，而是字級縮得比留白還兇。
手機版預覽只是起點，上線前還要做這些檢查
Elementor 內建的裝置預覽很方便，切到手機或平板模式後，還能直接拖曳畫面左右和下方的邊界，調整成任意寬度即時看效果，不用另外開瀏覽器就能抓出大部分版面問題。不過這終究是編輯器裡模擬出來的畫面，不是使用者實際打開網站時看到的樣子，拿它當唯一的驗收依據並不夠。
上線前建議至少再多做兩件事。第一是用瀏覽器內建的開發者工具切換裝置模式檢查一次，不同瀏覽器的排版引擎偶爾會有些微落差，尤其是彈性版面的呈現；第二是有條件的話直接拿實際的手機、平板打開頁面看一次，畢竟編輯器模擬終究是模擬，真機上的字級、觸控範圍才是使用者真正會遇到的樣子。
Google 現在怎麼判斷一個網站的行動裝置體驗，也值得順便更新一下認知。過去那個獨立的行動裝置友善測試工具，連同 Google 搜尋主控台裡的行動裝置可用性報表，已經在 2023 年底一併下線，Google 官方建議改用 Chrome 內建的 Lighthouse，搭配 PageSpeed Insights 檢查，這兩個地方會回報實際偵測到的行動裝置體驗問題，是目前比較準的做法；如果還在照舊教學去找已經下架的獨立工具或報表，只會撲空。
最後一個容易被忽略的細節是觸控範圍。手機是用手指點，不是滑鼠游標，按鈕、連結這類可以點擊的區域要留夠大，業界常見的建議尺寸落在 44 x 44 像素左右，這也是 Apple 人機介面指南採用的數字。範圍留得太小，使用者常常得點兩三次才點得中，體驗會打折扣。
響應式設計做得好，不是把桌機版等比例縮小，而是讓桌機、平板、手機各自都有最順手的樣子。每次改完版面，花幾分鐘把三種裝置都點開檢查一次，比等使用者抱怨看不到東西才回頭找問題划算得多。