多設備的Web佈局模式-響應式佈局技術

時間 2019-11-06

標籤設備 web 佈局模式響應技術欄目 HTML 简体版

原文原文鏈接

經過靈活的柵格和Media Queris，響應式Web設計可以讓頁面佈局適應不一樣的屏幕尺寸。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。下面我列出了一些比較熱門的適應多設備的佈局模式。git

最受歡迎的模式或者就是這種最簡單的方式：在更大屏幕使用更大margin的多列布局，依賴於靈活的柵格和圖片，在小屏幕中某列內容往下排。github

我把這種模式列爲「最靈活」，是由於在不少尺寸的屏幕中，主要佈局結構並無很大改變，直到在很小的屏幕當中。這個設計依賴於靈活的柵格來適應不一樣的屏幕尺寸。下面是幾個使用這種模式的網站示例。web

固然這幾個例子有不一樣的地方：元素移動的方式不一樣、屏幕尺寸劃分的不一樣等，可是大致上，這種模式有着不少的類似之處。設計

另外一種模式以多列開始，以單列結束，當屏幕尺寸變小，列內容會往下排。不像第一種模式，這種模式的元素大小基本保持不變。orm

各列內容在分辨率臨界點有怎樣的變化，什麼時候變化和如何變化，取決於每一個不一樣設計。可是大致上，在窄屏幕中，導航或者主要內容是放在頂部的。如下是這種模式的幾個例子：

這種模式盡最大可能地去適應不一樣的屏幕尺寸。便是，不一樣的佈局應用於的大、中、小屏幕當中。由於這原本就花費更多的工做量，因此相比前面兩種模式，這個的受歡迎程度稍低。

基於所見的最多見的網站例子，雖然我把這種模式籠統地括入以上的插圖，但事實上這種模式是不少創新產生的地方。因此，沒有哪一種固定格式能夠歸納全部這種模式的設計。看看如下幾個例子：

這是最簡單的模式，因此也是不經常使用的模式。大概是由於不多公司會有這麼簡單的網頁，內容少而且是單列布局。對於使用這種模式的網站，多設備適應也僅僅是一些關於文本和圖片的簡單的變化，

插圖看起來不是那麼有說服力，因此，直接看例子吧：

雖然以上列了幾種不一樣的模式，可是它們之間仍是有相同的地方。它們都會在小屏幕當中，把內容往下掉，結果是頁面很長，包含不少的內容模塊。另外可能不太明顯的一點，是它們一樣地依賴屏幕的空間以調整頁面佈局。

可是你可能會疑問，這不就是咱們的目的嗎？這只不過是，咱們把思想侷限在了可視的範圍內。實際上，屏幕外的空間老是比屏幕上的空間大得多。好好利用吧！

就如上圖所示，Off Canvas模式利用了屏幕外的空間，它把內容或導航隱藏在這裏，直到在大屏幕顯示或者在小屏幕用戶展開它。這種模式出如今一些移動網站和原生的移動App當中。

Facebook的移動Web利用了左邊的空間，把導航選項隱藏在這裏，直到有人點擊連接展開它。在這時候，屏幕外的內容就展現在屏幕當中。有些響應式設計採用了類似的方法，可是其中有些遇到了可訪問方面的問題。

Path的原生移動App採用了一種分層技術來建立Off Canvas效果。這個App利用了屏幕的左邊和右邊來導航。

Tokil Jahnsen建立了 proof-of-concept ，模仿了Path的設計。

Google 的移動版本利用了上面的部分，把導航信息隱藏在此。當用戶點擊「more」的時候，這些選項從上面滑動到可視區域。

Off Canvas 模式的大致思想是，在小屏幕，除非被點擊，附加的元素是被隱藏的。隨着屏幕變大，可視部分愈來愈多，直至沒有須要展開的元素。若是有人有興趣用響應式設計思想建立這種模式的網站，請告訴我!

我以爲Off Canvas 模式比較有意思，由於它避免用戶在小屏幕中滾動屏幕和導航。它把網頁的區塊進行分離、分標籤、按需出現。

與這個相關的話題，Brad Frost 最近對響應式設計導航解決方案作了很好的分類。

原文：Multi-Device Layout Patterns，做者是 Luke Wroblewski

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。