適應性設計簡介

在行動裝置上造訪網站時，您可能會遇到該網站的桌面版本被擠在較小的螢幕中，迫使您放大並移動以查看任何內容。或者，您可能會被引導到簡化的行動版本，該版本缺乏使桌面版本變得優秀的實質內容和體驗。然而，理想情況下，您會遇到一個適應性強的網站——一種根據瀏覽器寬度重新排列和重新定位內容的佈局。

在這裡，我們將深入探討適應性設計的三個不同面向：

1. 重新定位內容
2. 固定比例
3. 相對比例
4. 中斷（媒體查詢）

重新定位內容

重新定位內容表示根據瀏覽器視窗寬度修改其寬度的內容。例如，當瀏覽器寬度減小時，具有預設設定的段落將自動重新調整其內容的方向。可以透過拖曳設計器畫布的邊緣來模擬此行為。

固定比例

使用固定像素寬度時務必認真負責。例如，為圖像分配 500 像素的寬度在桌面或平板電腦上可能看起來很引人注目。但是，當在較小的行動裝置上查看影像時，影像寬度將保持固定為 500px，並且不會適應較窄的視窗（通常小於 500px）。

相對比例

這需要設定元素相對於其他元件（例如瀏覽器寬度或父元素）的大小。請勿使用基於像素的圖像尺寸，而是考慮使用各種單位，例如 %、VW（視口寬度）或 VH（視口高度）。透過在圖像上使用 % 並調整瀏覽器寬度，您會注意到它會相應地進行調整，而基於 px 的圖像則不會。

了解有關應用不同單位來管理元素寬度和高度的更多資訊。  

打擾

設計佈局通常比管理單一影像的寬度複雜得多。使用斷點（也稱為媒體查詢）不僅可以評估重新定位內容，還可以根據不同的裝置寬度範圍調整設計和佈局。

‍

探索更多：

• 斷點的啟動
• 專為更大的顯示器而設計