若你之前接觸過如何製作響應式網站，那你一定了解這是有多困難的工做，每一個尺寸都必須從頭刻一次。而 Webflow 已經幫我們超前部署完成了超多事前的工作，透過上方尺寸的瀏覽器，你看到它實際的瀏覽效果，下面案例我們也將逐步透過上方覽設計器頂部欄中心來給各不同尺寸的設備預覽畫面。
如果你是按照一般把設計放到 Webflow 設計師畫版的方式進行設計，Webflow 將自動嘗試使所有內容都響應。但是，如果有使用 Grid（我們大部分製作的網站都是這樣) ，你則需要按比例縮小或移動元素及物件。
關於佈局 Grid 的介紹:
布局類型 Grid - Webflow 學習文件 (Official)
使用 CSS 網格在響應式佈局中定位內容吧！
我們可以看到，任何處於平板模式或更小尺寸，網站文字及圖像看起來都怪怪的，且字體大小也有點太大，而且我們的內容太靠近邊緣。
由於在平板模式下所做的任何設計更改都會反映到更小的尺寸上。因此，我們建議設計師們要從平板電腦模式開始調整，並根據需要逐步進行操作。
一旦發生這種情況，單擊右列網格並通過單擊對齊中心將圖像移動到 div 的中心。從那裡，向右列網格添加一些頂部邊距以將其降低。
我們看到的第一件事是字體太大。接下來，我們想從邊緣引入我們的內容。要解決此問題，請選擇整個 Grid 所在的 Container 並在側面添加填充。
手機版的一樣是字體太大的問題，讓我們縮小標題、段落和按鈕文本的大小。
完成！做完這個步驟，你應該感到非常自豪，因為我們沒有用任何代碼，就直接完成了一個完整的主頁。（請替自己鼓掌吧！！)
當然你也可以從 Webflow 裡面查看所有 HTML 和 CSS：
