# 響應模式 （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/)
