RWD 響應式網頁設計

響應式網頁設計(英語:Responsive web design,通常縮寫為RWD),或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。

是一種網頁設計的技術做法,該設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。

對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。此概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出。

引用至維基百科

RWD 優勢:


  1. 適用 手機 電腦 平板
  2. 採用「CSS3」的 media queries (媒體查詢) 技術,面對不同螢幕尺寸能自動調整網頁版面寬度、操作介面、內容排版、圖片大小…等,電腦、平版、手機 都能順利瀏覽,就算未來有更大或更小螢幕尺寸的的裝置,也不用擔心無法順利瀏覽網頁的問題。

  3. 更好的SEO(搜尋最佳化)經營
  4. Google會也在「行動版網站搜尋引擎最佳化設定」指南中建議使用RWD技術來開發網站,有此可見「RWD響應式網頁設計」利於SEO,讓網站能取得更好的排名。

  5. 利於分享網頁
  6. 當使用者或企業分享網站文章或是公司資訊時,常常因為另一方使用者用手機或電腦開啟不同,而得不到好得顯示效果,有時還會因為網站的裝置判斷而導進首頁,而無法順利觀看到文章,文章的按讚數、流量分析也容易被分散,分享出去的網址也只這一個,就不會有這些問題產生。


RWD 缺點:


  1. 手機尺寸不適合複雜的功能或介面
  2. 這是所有小尺寸螢幕共同的缺點,礙於螢幕空間有限、行動裝置只有觸碰功能…先天限制,因此較不易將RWD拿來開發某些適用於「桌機或筆電」的網頁功能(例如拖曳、按右鍵、連點2下…等);但如果僅部份系統、頁面有此需求,可考慮放棄小螢幕尺寸,或改用「電腦版+手機版」的設計模式,將不同瀏覽者族群分開使用個別的網站。

  3. 開發工時較久
  4. RWD網站在開發上需對多種尺寸裝置進行調校,圖片顯示文案等設計,所花費的時間自然比起傳統網站來的長。

  5. 瀏覽器相容
  6. RWD採HTML5架構,因此有些較舊的瀏覽器可能不能相容,會出現與設計不同或破版問題;不過這問題隨著微軟放棄IE10以下版本而得到了解放,現在多數的瀏覽器都已支援HTML5,如有不相容問題出現,可以建議使用者升級、更新瀏覽器。


更多介紹:


採用 RWD 設計的網站使用CSS3 Media queries,即一種對 @media 規則的擴充功能,以及串流的基於比例的網格和自適應大小的圖像以適應不同大小的裝置:

  • 串流網格概念要求頁面元素使用相對單位如百分比或字型排印學調整大小,而不是絕對的單位如像素或點。
  • 靈活的圖像也以相對單位調整大小(最大到 100%),以防止它們顯示在包含它們的元素外面。
  • Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則,最常用的是瀏覽器的寬度。
  • 回應式網頁設計變得更加重要,因為移動流量現在占網際網路流量的一半以上。因此,Google宣布行動裝置時代的到來(Mobilegeddon)(2015年4月21日),並開始提高移動友好的網站的評級,如果搜尋是被從一個行動裝置發起。



你也可以參考維基百科

Tags :

About the Author

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *