今天要跟大家淺談一下有關RWD響應式網頁式設計是什麼?

什麼是RWD響應式網頁設計?

響應式網站（Responsive Website Design，簡稱 RWD)

是針對你所使用的裝置讓網頁的版面重新做編排，讓使用者的體驗性更好!

現在這個時代大多都人人手中一支智慧型手機，有的人還可能手機跟平板交錯使用。

那在網站設計上必須針對不同裝置去讓網頁的編排做調整，畢竟尺寸不同能呈現的頁面寬度也不一樣。

這也稱作RWD響應式網頁式設計。

什麼是AWD自適應網頁設計?

如果你試著拿RWD去問看看google大神一定會得到很多人解釋，通常還會伴隨AWD這個字眼出現。

自適應網頁設計（AWD, Adaptive Web Design）

小夥伴們一定會想問RWD跟AWD的區別在哪邊?

我來告訴你就是差在第一個英文字!

其實是這樣的兩個區別在於判斷讀取裝置後讀取的CSS檔案。

RWD:

都是讀取同一個CSS的檔案，根據不同寬度在讓網頁版型做調整。

AWD:

有針對不同裝置去設計不同的CSS檔案，一開始先判定你現在所使用的裝置是什麼? 在做決定要使用哪一個CSS檔案。

那一定有人問說還是看不出來哪有什麼區別?

以下是從Hahow獲得到兩者差別的解釋

原因1: 開發時的時間成本

使用 RWD 響應式設計開發手機版網頁，因為只需要撰寫一組 CSS 檔案，並在適當的斷點添加「媒體裝置查詢 @media」指令，即可自動適應不同螢幕尺寸。

AWD 自適應網站在開發時，會需要撰寫電腦版 / 平板 / 手機版這 3 種 CSS 檔案，來適應不同的螢幕尺寸，自然會增加開發時間。

各位工程師大大一定有懶惰的美德，所以可以一遍做好的事絕對不會在做第二次。

原因2: 維護成本

想當然AWD你耗費比較久的時間去編寫三個CSS檔案，加上你又要去分三個檔案維護它，如果有時候還要顧及SEO

考量到好不好維護以及時間的問題，俗話說的好

時間就是金錢 Time is money

所以現在比較主流的做法還是RWD，只用一支檔案解決。

畢竟工程師的肝可是很貴的!

原因3: 網站建構預算

這個牽扯到的跟上面有關，如果今天試想要花著雙倍的時間去做維護或是建構網站

相信聰明如各位，你一定會把這個成本加諸在費用上畢竟要花更多的時間或是人力成本去做這件事。

各位老闆一定會做出(便宜)最適合的選擇吧!

原因4: SEO排名優勢

RWD響應式設計對於 SEO 會是較良好的設置，因為 AWD 自適應設計需要為每個裝置的 CSS 檔案進行 URL 指向，較容易出錯。RWD響應式設計省去 SEO 前置步驟，可減少因為設置出錯，導致 SEO 分數受到影響的機率。

個人淺見因為現在人的使用習慣都是手機所以衍生出這個RWD設計，讓我們在使用網站上有更好的體驗。

還記得以前在使用手機開網頁，有的根本沒有做RWD用起來超痛苦超不友善。

想要把一個文章看完還要往右移，好險現在會根據裝置去對版面配置真是太棒了!

科技始終來自人性

我覺得這句話說得真是太有道理了!

現在想要學習有關於網頁設計，會比較推薦學習RWD比較符合現代的網頁設計方式!

參考文獻

hahow好學校