響應式設計入門 - Webflow 幫助
Last updated on 10/22/2025@mrbirddev
學習如何利用內容重排、固定尺寸、相對尺寸和斷點（媒體查詢）來創建響應式設計。
當你在移動設備上訪問網站時，可能會看到桌面版的網站被壓縮到較小的螢幕上，迫使你放大和平移以查看內容。你也可能會進入一個簡化的移動版，缺乏桌面版優越的內容和體驗。但希望你能看到一個響應式網站——一個根據瀏覽器寬度重排和重新定位內容的設計。
這裡我們將介紹響應式設計的三個不同方面：
- 內容重排
- 固定尺寸
- 相對尺寸
- 斷點（媒體查詢）
內容重排
內容重排是指根據瀏覽器視口寬度調整內容寬度。例如，具有默認設置的段落會隨著瀏覽器寬度變小自動換行。這種行為可以通過拖動設計器畫布的邊緣來模擬。
固定尺寸
使用固定像素寬度時要小心。例如，如果你給一個圖片設置寬度為500px，它在桌面或平板電腦上可能看起來不錯。然而，當在較小的移動設備上查看圖片時，圖片寬度將固定在500px，無法適應較小的視口（通常小於500px）。
相對尺寸
這是指將元素的大小設置為相對於其他事物，如瀏覽器寬度或父元素。例如，與其為圖片使用基於像素的大小，不如考慮使用不同的單位，如%、VW（視口寬度）或VH（視口高度）。如果你在圖片上使用%並調整瀏覽器寬度，你會看到它會相應地適應，而基於px的圖片則不會。
瞭解更多關於應用不同單位來控制元素寬度和高度的資訊。
斷點
佈局通常比管理一個圖像的寬度要複雜得多。使用斷點（也稱為媒體查詢）不僅可以測試內容的重排，還可以根據不同設備的寬度範圍修改設計和佈局。
瞭解更多：
Last updated on 10/22/2025@mrbirddev
Recent Articles