RWD (Responsive Web Design) 和 AWD (Adaptive Web Design)

tags: 設計

RWD (Responsive Web Design) - 響應式網頁設計

RWD 代表 Responsive Web Design，這是一種利用 CSS 媒體查詢和流式佈局，使得網站能夠根據用戶的屏幕尺寸自動調整其內容和佈局的設計方法。RWD 會在同一頁面上使用相同的 HTML，並根據設備的不同尺寸動態調整 CSS 來適應不同的顯示設備。

主要特點：

• 單一布局：RWD 通常會使用一個通用的設計，並依據設備的屏幕大小動態改變元素的佈局和大小。
• 媒體查詢：根據屏幕寬度、解析度等條件進行調整，實現各種設備間的一致性。
• 流式佈局：元素的大小通常使用百分比，而不是固定的像素值，這樣能夠自適應不同的屏幕。

AWD (Adaptive Web Design) - 自適應網頁設計

AWD 代表 Adaptive Web Design，這是一種設計方法，目的是根據設備的屏幕尺寸和特性（如解析度、方向等）提供不同的頁面樣式。與 RWD 不同，AWD 並不是通過縮放或彈性布局來調整網頁，而是根據使用者的設備來加載一個預設的樣式表（CSS）。

主要特點：

• 多個不同的 CSS：AWD 會為不同的設備準備不同的樣式表，並根據用戶的設備自動加載相應的樣式。
• 靜態布局：相比 RWD 使用的流式布局，AWD 通常有多個為特定設備定制的固定布局，這些布局根據設備的屏幕尺寸和分辨率而不同。
• 加載特定樣式：AWD 會在網頁的背後根據設備的類型（例如手機、平板、桌面）選擇合適的 CSS 文件，而不是通過媒體查詢動態調整。

AWD vs RWD

特徵	RWD (響應式網頁設計)	AWD (自適應網頁設計)
設計原理	使用相同的 HTML 和單一設計，根據屏幕調整布局	針對不同設備加載不同的 CSS 文件
布局	動態調整元素，流式布局	預設多種設備版本，通常為固定布局
CSS 管理	通過媒體查詢調整同一份 CSS	為不同設備設置不同的 CSS 文件
加載方式	使用相同的頁面和 CSS，根據設備進行響應	根據設備自動加載不同的 CSS
範例	單一網址，在設備上根據尺寸響應顯示	網址可能會顯示為 /mobile 或 /tablet

實際應用示例

• 如果網站使用 AWD，您可能會看到類似 /mobile、/tablet 或 /desktop 的網址結尾，這意味著每個設備版本會加載不同的設計和內容。
• 如果網站使用 RWD，無論是從桌面還是手機訪問，網址保持不變，並且頁面會根據屏幕大小動態調整。

結論

• AWD (自適應網頁設計)：根據不同的設備顯示完全不同的樣式，通常會根據設備的類型加載特定的 CSS 文件。網址可能會反映設備版本（如 /mobile 或 /tablet）。
• RWD (響應式網頁設計)：使用相同的 HTML 和頁面，通過媒體查詢根據屏幕大小調整佈局和元素。