響應式網頁設計的九條基本原則

點閱:129 平均評分:10.00 (1票) 迴響:0
作者:Sandijs Ruluks 來源:http://blog.froont.com/9-basic-principles-of-responsive-web-design/
譯者:Web前端(W3Cways.com)譯文出處:http://www.w3cways.com/1754.html
響應式Web設計對於解決多類型屏幕問題來說是個不錯方案,但從印刷的角度來看,其卻存在著很多的困難。沒有固定的頁面尺寸、沒有毫米或英寸,沒有任何物理限制,讓人感到無從下手。隨著建立網站可用的各種小工具越來越多,像素設計局限於PC和移動端也已經成為歷史。因此,現在就讓我們來說明一下如何運用響應式Web設計的各項基本原則來實現,而不是抗拒流暢的網頁體驗。為了簡單起見,我們將著重講佈局(當然,響應式設計遠遠不止於此,如果你想進一步學習,這是[註]一個不錯的起點)。

響應式設計 vs 適應式設計

兩者看起來很像,其實是不一樣的。兩者相輔相成,沒有對錯之分,都是由內容來決定的。
響應式設計 vs 適應式設計

內容流

隨著屏幕尺寸越來越小,內容所佔的垂直空間也越來越多,即內容會向下延伸,這稱之為內容流。如果你習慣了使用像素和點進行設計,可能會覺得這個有點難掌握。不過習慣就好。
內容流

相對單位

你的設計對象可能是PC,也可能是移動端,或介於這兩者之間。像素密度會不同,所以我們需要一種靈活的單位,百分比等相對單位就派上用場了。使用百分比時,我們說寬度50%就是表示寬度佔屏幕大小(或者叫視區,也就是指所打開瀏覽器窗口的大小)的一半。
相對單位

斷點

斷點可以讓頁面佈局在預設的點進行變形,也就是說,在PC上顯示3欄,在移動設備上僅顯示1欄。大多數CSS屬性都可以實現斷點之間的變形(這裡可以參考)。斷點位置取決於內容。比如,如果一句話要換行,你可能就需要加上斷點。但斷點使用時需要謹慎——如果搞不清內容之間的邏輯關係,很容易弄的一團亂。
斷點

最大和最小值

有時候,滿屏內容顯示的感覺不錯,例如在移動端,但是同樣的內容放到PC端再滿屏顯示就沒有意義了。這就是為什麼需要最大值跟最小值。例如,如果寬度為100%,最大寬度1000px,那麼內容就會以不超過1000px的寬度填充屏幕。
最大和最小值

嵌套對象

還記得相對位置嗎?如果有一大推相互緊密聯繫的元素,那麼就會很難去控制。將元素放到容器中,就會顯得簡潔明快。這種情況就需要用到像素之類的靜態單位了。靜態單位對於logo和按鈕等不需要擴展的內容來說非常有用。
嵌套對象

移動端優先或桌面優先

一個項目,從手機端顯示再過度到PC端顯示(移動優先),還是先在PC端顯示再過度到手機端顯示(桌面優先),兩者差別不大。如果你想要移動端優先的話,會增加一些限制條件,並幫助你進行決策。通常都會兩者都考慮,看哪種更適合你。
移動端優先或桌面優先

Web字體 vc 系統字體

想讓自己的網站擁有炫酷的Futura或Didot效果嗎?那就是用web字體吧。儘管web字體看起來很炫酷,但你要記住,這些字體都需要用戶下載,字越多,用戶加載頁面的時間也就越長。另一方面,系統字體加載速度則快得多(前提是用戶本機就有)
Web字體 vc 系統字體

位圖 vs 矢量圖

你的圖標是否有很多細節,並且應用了很多​​華麗的效果?如果是,那就用位圖。如果不是,考慮使用矢量圖。如果是位圖,使用jpg、png或gif。矢量圖則最好使用SVG或圖標字體。其各有利弊。但你要時刻牢記圖標尺寸——未經過優化的圖片不能傳到網上。另一方面,矢量圖通常比較小,不過部分比較老的瀏覽器可能不支持矢量圖。還有,如果圖標有很多曲線,那有可能會比位圖還大,所以看情況取捨。
位圖 vs 矢量圖



[註]:因譯文版網址連結已失效而換上英文原版網址連結。