RWD網頁設計概念

 

起源

 

此概念於 2010 年 5 月由國外著名網頁設計師 Ethan Marcotte 所提出。此概念出自於響應式建築設計的概念,也就是房間或空間會自動調整其容納的人數和人進出的流量。

Ethan Marcotte 於他的文章中提到,響應式建築結構就是建築師將透過嵌入式機器人和可延展的建材結合,以藝術裝置和牆體結構作為實驗,當人群靠近藝術裝置時,牆體會彎曲、伸縮或延展。運動感測器可以和空調系統配對,感測器感應到房間內的人數變多時,會自動調節房間的溫度和環境照明。甚至有公司已經發明出智慧玻璃技術,當房間裡的人的密度達到一個標準值的時候,玻璃會自動變得不透明,可以給在會議室裡開會的人額外的隱私。

這個概念轉移到網頁設計上,就會有類似但全新的想法,為什麼我們要為每一種不同瀏覽設備又分別設計不同尺寸的網頁呢?網頁設計不應該為每個新的螢幕尺寸又額外提供無數個解決方案,網頁設計的格局應該要能夠自動調整。

多變的螢幕尺寸

 

隨著各家品牌的行動裝置發展快速,市面上的行動裝置有很多種不同尺寸的螢幕,而且這些設備通常都能隨著使用者的喜好可以將螢幕從縱向轉換成橫向瀏覽,如此多變的螢幕尺寸,網頁的大小又該如何能隨著這項多變的特性自動調適呢?

最佳的解決方案

 

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

  • 串流網格概念要求頁面元素使用相對單位如百分比或字型排印學調整大小,而不是絕對的單位如像素或點。
  • 靈活的圖像也是以相對單位調整大小(例如圖片寬度的最大值是 100%),以防止它們超出顯示在父容器的外面。
  • Media queries 允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則,最常用的是瀏覽器的寬度,瀏覽器的寬度大於或小於某個值的時候,網頁會自動套用其相符的 CSS 樣式。
  • 響應式網頁設計變得更加重要,因為行動裝置的行動數據流量現在占網際網路流量的一半以上,現在你不必再考慮要不要開發手機APP了,一個RWD網站就全部搞定了!