給前端工程師的RWD概念(中) | rwd斷點
給前端工程師的RWD概念(中):佈局斷點以設備為主還是內容為主今天的前端工程師RWD基礎概念要來教你佈局斷點該以甚麼為主要設計!!有興趣的快往下看~ 當代的前端工程師[1]與網頁設計師[2]在開發網站時都選擇RWD網站,在規劃其MediaQuery[3]的尺寸斷點時,有兩種布局斷點的依據:「根據設備」以及「以內容為主」,介紹如下:1.根據時下的主流設備來佈局斷點(設備優先)透過時下主流的設備(如當代最熱門的手機、平板或電腦螢幕等)來確定布局的斷點,而設計多套樣式,再分別對應到各種設備上,如此就可準確定位斷點。這種套用現成的設備尺寸...
給前端工程師的RWD概念(中):佈局斷點以設備為主還是內容為主今天的前端工程師RWD基礎概念要來教你佈局斷點該以甚麼為主要設計!!有興趣的快往下看~
當代的前端工程師[1]與網頁設計師[2]在開發網站時都選擇 RWD 網站,在規劃其 Media Query[3] 的尺寸斷點時,有兩種布局斷點的依據:「根據設備」以及「以內容為主」,介紹如下:
1.根據時下的主流設備來佈局斷點 (設備優先)透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點,而設計多套樣式,再分別對應到各種設備上,如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便,又能精準對應到時下最普及的設備,但是隨著設備不斷汰舊換新,未來總會有無法合適對應到的設備。
2.根據網頁內容作為佈局斷點的標準 (內容優先)這種方式不是以設備為主;而是依據網頁內容的布局、段落等來下斷點,是真正符合 RWD 響應式網站[4] 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易,但是斷點會依據設備的不同而落在不同的地方,這樣就沒有標準、精準的設計模式。
儘管如此,現今大多前端工程師[5]與網頁設計師[6]會更偏向「內容優先」的方式。因為電腦、行動裝置等設備不斷推陳出新,若採用此種方式,雖然無法精準的對應到特定的設備,但是卻可廣泛涵蓋現在、未來全部的設備。且無論瀏覽媒介如何改變,重點依然是網頁內容的本身。在內容優先的策略中,前段工程師與設計師要讓網站盡可能兼容所有設備:因為我們不知道用戶會用什麼樣的設備來訪問網站,因此,我們必須盡可能地把所有狀況都考慮進來;所有的佈局、元件、區塊和UI,UX設計等都能兼容不同類型的設備和平台。有「優雅降級(Graceful Degradation)」以及「漸進增強(Progressive Enhancement)」兩種思維模式,可以套在「內容優先」為主的 RWD 響應式網站[7] 設計的過程:
「優雅降級」還是「漸進增強」?圖上方為「優雅降級(Graceful Degradation)」的網頁設計[8]模式;下方為「漸進增強(Progressive Enhancement)」模式 1. 優雅降級(Graceful Degradation)
一開始...