網站新知

何謂響應式網頁設計?

• 來源
• 2014-01-28

響應式網頁設計(Responsive Web Design)概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出的概念。
簡單的來說讓網站可以針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時，整個網頁頁面會對應不同的解析度，而有不同的呈現方式，也是是說可以讓最重要的訊息在有限的版面中清楚的呈現給用戶。

響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計，這是一項被公認在2014年網頁設計開發技術的趨勢，網站使用CSS3 media queries方式，以百分比的方式以及彈性的畫面設計，在不同解像度下改變網頁頁面的佈局，的讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗，因為移動平台的用戶大量增加而想出的一個對應方法。

說得簡單一些，透過CSS，可以使得網站透過不同大小的螢幕視窗來改變排版的方式，使得使用者能夠得到最佳的視覺效果

由於是由同一個網頁轉變，管理者也就不必大費周章的重複更新網頁資訊，一次搞定！

不僅手機版本，就連平板電腦如iPad等的平台也能夠達到視覺最佳化

目前行動手持裝置（智慧型手機）的數量，己經正式超越了PC，成為企業不可忽略的新興力量，面對於各式各樣的手持螢幕尺吋，Ethan Marcotte提出了響應式網頁設計概念，讓瀏覽裝置只是一個載具，使用者才是真正的主角。

這種設計，不單單只是程式碼的配合而己，整體網頁在架構及設計上，一開始就要導入響應式網頁設計的概念，在響應式網頁設計概念的引導下，網頁設計框架必需框架簡潔俐落，訊息清晰易讀，搭配優美的圖片，採用 Html 5 特效動畫設計，讓整體網頁整體設計可以正確無誤的傳達品牌形象及企業訊息給使用者，達到響應式網站的目的。

提醒一下，通常RWD的網頁設計要考量流動式的佈局，所以在設計上不會有過多的材質或是特殊的造型或設計，這樣才能避免在不同瀏覽尺寸下產生不自然的銜接或破圖，所以喜歡比較花俏或是比較特殊造型的版型設計，就比較推薦以一般網頁設計為主，另外搭配手機版本的處理方式 。RWD的網站通常會走比較簡單時尚的作法 , 因為也要考量網站在手機版本讀取的速度，所以考量的點比一般網站多出許多.

依據以上概念，不過有些網站可能不適合響應式網頁設計，比如大型入口網站、購物商城網站、遊戲網站等，需要閱讀大量文字或大量操作的狀況下，無法達到響應式網頁設計的簡潔理想要求。

---

---

標籤: