響應式網站設計 RWD

高雄網頁設計

RWD

高雄網頁設計,RWD

  Knowledge / 知識觀點

07/23

響應式網站設計概念



起源:
Ethan Marcotte 在他的 A List Apart 的文章中發明了術語 Responsive Web Design (RWD)。

概念:
Wikipedia的定義:「自適應網頁設計(英語:Responsive web design,通常縮寫為RWD)是一種網頁設計的技術做法,該設計可使網站在多種瀏覽裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上閱讀和導航,同時減少縮放、平移和捲動。」
具體來說RWD是在客戶端偵測屏幕尺寸和尺寸的改變(比如手機從垂直顯示變成橫向)來改變頁面佈局和外觀,配合如流體佈局和可以自適應的圖片/視頻等技術,使頁面只需同一套程式碼,就能夠適應不同屏幕尺寸的技術。

特性:
選擇性加載CSS和流體佈局流體佈局是多年前已經流行的技術,指頁面佈局會隨著瀏覽器尺寸改變而變化,例如兩欄彈性佈局,一邊是固定寬度的邊欄,另一邊是彈性寬度,隨著瀏覽器尺寸改變而填充空間。 CSS3的新功能Media Queries,原理是制定不同斷點(Break point),當屏幕尺寸符合某2個斷點之間的範圍,就使用特定的CSS來改變佈局,通常還會配合流體佈局使用,例如使用百分比定義元素寬度而不是固定寬度,提高頁面自適應性。

自適應的圖像和視頻以相對單位(%,em)調整多媒體大小。相對大小字體同2,對字體不使用絕對單位(px,pt),而使用相對單位(em)。頁面縮放控制使用HTML的標籤,控制頁面在設備上的縮放初始值和被用戶縮放的上下限等。

JavaScript除了CSS3的Media Queries,也會能使用JavaScript偵測屏幕尺寸變化,對頁面作出比CSS更大程度的調整。兼容性有移動優先(Mobile first) 和漸進增強(Progressive enhancement) 2個概念: 移動優先是由於較基礎或較舊的瀏覽器不能使用Media Queries或JavaScript,因此比較好的做法是先做出通用的固定佈局框架,之後再為功能較強的瀏覽器提供增強功能。漸進增強是使用某些偵測技術推斷瀏覽器是否支援個別功能,例如JavaScript的庫Modernizr。也會使用Polyfills來以非官方的技術為特定瀏覽器補充其所缺失的功能。



文章引用:https://samwebman.wordpress.com/




高雄網頁設計 RWD

高雄網頁設計,RWD