認識RWD網站

什麼是響應式網頁設計(Responsive Web Design)?

rwd-intro4.jpg

隨著上網習慣的改變,人手一支智慧型手機的比例也愈來愈高,近年來也開始重視手機視覺效果,也開始跟傳統的手機版網站有所區隔,一般的手機版網站設計都是跟官方網站分開製作,所以若要更新內容的時候,不僅需要更新兩次資料,若是電腦版網站與手機版網站委託的設計公司又是不同的話,很容易造成無法同步的問題,也容易引起不必要的客訴。

  


響應式網頁設計(Responsive Web Design),又簡稱為RWD,這個名詞在2010年 Ethan Marcotte 這個人提出,也稱為自適應網頁、適應式網頁、回應式網頁設計,簡單的說,就是讓網頁隨著使用者不同的螢幕解析,在不同的解析度下改變網路的整體排版,讓不同載具的螢幕都可以正常的瀏覽同一個網站,以提供最佳的視覺體驗,

文章 : http://alistapart.com/article/responsive-web-design/

 


 

rwd-intro1.jpg螢幕解析度在寬度 1024px 以上的,顯示網站的完整資訊 

 


 

 

rwd-intro2.jpg

螢幕解析度在寬度 768px 以下的,原本中間四欄的部份,自動變換成2欄式

而選單的部份也自動縮成區塊點擊式呈現

 


 

 

rwd-intro3.jpg

螢幕解析度在400px以下的,相當於智慧手機5吋的畫面,畫面呈現直條狀。

 


  

結論:透過 CSS 的調整,讓網站可以依據不同載具(如手機、平板、電腦)來做變化,呈現出最佳的視覺效果,也因為是同一個網頁做變化,管理者也就不需大費周章的管理多個網站。