ABOUT VIC / SHARE
經驗分享園地
經驗分享園地
2015/8/27 下午 01:29:06
響應式網站技術

隨著網路通訊的盛行,行動裝置幾乎已是人人隨身必備之一,為了因應每日推陳出新的螢幕尺寸規格,著名網頁設計師Ethan Marcotte於2010年5月提出了響應式網頁設計概念。所謂響應式網頁設計,又稱響應式網頁設計(Responsive web design縮寫RWD) 為一種網頁設計的技術,透過CSS3+ Media Queries網頁技術設計,依據使用者的裝置(電腦、平板、手機),網頁程式能自動分辨及切換,將相同網頁內容,不論是文字、圖片皆可以完整瀏覽並適應於在不同尺寸、解析度的裝置上,隨著版面自動更改編排方式,正確的顯示網頁內容,提供最佳的視覺感受。

早期的手機網頁開發都是與電腦上的網站區隔開來另外再製做,此種方式導致管理者若要更新網頁內容時就必須要更新兩次,由於內容皆由同一個網頁轉換,管理者不需再花費兩倍時間重複更新網頁資訊,使用響應式網頁技術一次就搞定!

 
 
優點 缺點
  1. 自由的跨平台瀏覽,自動調整網站內容,
      適用於各種尺寸螢幕顯示器。
  1. 載入速度慢的問題。
  2. 同一後台管理,電腦、平板、手機,資訊同步
      更新。
  2. 單元選單過長
  3. 同時減少於螢幕上縮放、平移、捲動的操作。  
  4. 維護成本低  

 

以維克網站為例說明:

1. 當螢幕解析度寬度在1024像素以上,畫面呈現網站完整資訊。
2. 當螢幕解析度在700像素以下,原本中間4張banner會自動縮成1排顯示。
3. 當螢幕解析度在400像素以下,畫面則以直條狀方式呈現,以便手機閱讀。

 

以維克客戶網站為例說明:


新東陽102年過年-新東陽過年送好禮 萬元紅包週週送活動網站建置案

 

國外響應式網頁設計案例欣賞:


STARBUCKS


微軟

回分享列表
心動,不如即刻留下需求資訊,我們將盡快與您聯繫。
Contact Us