# 響應模式 (Responsive Patterns)
有意或者無意之間,我們的網頁總會歸于某種”響應模式“( Responsive Patterns ),這里來介紹一下幾種常見的模式,相信是非常有啟發性的。
基本思路就是這樣,在手機上,網站內容是單列布局的,到了桌面電腦上面就變成了多列結構。所謂”模式“,就是在臨界點發生的時候,網站布局該做出怎樣的變化。比較常見的模式有四種,當然有時候也可以在一個頁面上混合兩種模式來使用。接下來我們看看幾種常用模式。
## Column Drop

我們這個翻譯叫做"列下沉",在最窄的屏幕上,所有元素就垂直一個跟一個排成一列。 屏幕變寬時,到達第一個臨界點后,第一個和第二個元素就變成左右兩列排布了。后面屏幕繼續變寬,第三個元素又”下沉“(反向的)到了這一行中。 這是最簡單最常見的一種模式。
案例:[Column Drop1](http://codepen.io/kinghs/pen/GNdROZ?editors=1100)
實際中的一些網站賞析:
* [http://modernizr.com/](http://modernizr.com/)
* [http://weenudge.com/](http://weenudge.com/)
## Mostly Fluid

這種模式我翻譯為“基本流體”,這種方式其實跟 Column Drop 差不多,只是稍微靈活了一點。跟前面的 Column Drop 一樣,當屏幕最窄的時候,元素一個跟一個排成一列。當布局開始變寬,會出現網格模式,具體每一行上有幾列內容就不一定了,根據我們自己頁面的內容自由調整。寬到一定程度,主體內容的左右兩側就會出現 margin ,而不是讓主體內容一直跟著 viewport 來變寬。
實現方式不唯一,下面的代碼是用 flexbox 方式實現的,可供參考。
案例: [Mostly Fluid](http://codepen.io/kinghs/pen/zojYgV)
實際中一些網站賞析:
* http://www.html5rocks.com/en/
* http://mediaqueri.es/ala/
* http://mediaqueri.es/
## Layout Shifter

這個我翻譯為“變換式布局”。這種方式就比較靈活了,跟前面的兩種方式一樣的部分是:隨著屏幕變寬,單列布局變多列。但是, 前面兩種方式都是各個元素由原本的獨占一行,變為依次變成多個元素共同占有一行。注意,沒有哪個元素是跨越多行的,或者說就是同行上每個元素的高度是相同的。 而 Layout Shifter 這種方式的特點是各個元素的擺放位置不一定遵循原來的順序,而可以根據需要任意調整,這就是所謂的“變換”( shift ),也會出現上面圖中所示的一個元素的跨多行的情況。
這種布局使用傳統的方式還是比較麻煩的,但是使用Flexbox的order實現還是比較方便的:
案例:[Layout Shifter](http://codepen.io/kinghs/pen/pNVPjv?editors=1100)
達成這種模式也不一定非要用 flexbox,比如下面這些實際中的例子:
* http://foodsense.is/
* http://www.anderssonwise.com/
* http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
## Off Canvas 抽屜式
Off Canvas我將它翻譯為”抽屜式“。Off Canvas 模式的特點是當在手機上顯示的時候,把一些不常用的頁面元素隱藏起來,當然要有一個漢堡包按鈕能很方便的讓他們顯示出來。而當屏幕空間足夠的時候,直接顯示前面被隱藏的內容,例如一個導航欄:

案例:[Off Canvas](http://codepen.io/kinghs/pen/QGrgwG)
實際例子:
* [HTML5Rocks Articles](http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/)
* [Google Nexus](https://www.google.com/nexus/)
* [https://www.canva.com/](https://www.canva.com/)


## Tiny tweaks
最后在來說個簡單些的,就是Tiny Tweaks,其實可以叫做微調整,像根據窗口大小來調節文字等。這種方式比較適合單欄布局或者像一大篇文章的形式。
案例:[Tiny tweaks](http://codepen.io/kinghs/pen/jVxwJz)
實際案例:
* [Ginger Whale](http://gingerwhale.com/)
* [Future Friendly](http://futurefriendlyweb.com/)
## 參考資源
* [Luke Wroblewski](http://www.lukew.com/ff/entry.asp?1514)
* [google&udactiy 課程](https://www.udacity.com/course/viewer#!/c-ud893/l-3561069759/e-3529819408/m-3571808936)
* [google developer](https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns?hl=en#mostly-fluid)
* [Creating a Mobile Responsive Web Design](https://www.html5rocks.com/en/mobile/responsivedesign/)