# 推崇移動優先
在之前已經了解了什么是響應式，其實響應式設計可以有兩條道走，一條是移動優先的響應式設計(Mobile First RWD),一種是通常的響應式設計。像 Bootstrap 這樣的前端 CSS 框架，就聲稱自己是 Mobile First 。 那什么是 “移動優先的響應式設計”？它的優勢在哪里呢？
## 1.移動優先的響應式設計
[Luke Wroblewski ](http://www.lukew.com/about/)在2009年寫得一篇名為 [Mobile First](http://www.lukew.com/ff/entry.asp?933) 的博客中首次提出了“移動優先”這個概念。 在這篇博客中，作者認為應該先設計移動端的網絡應用或網站的用戶體驗，然后再考慮桌面版。
普通的響應式設計流程，引用作者的話解釋如下：
> More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete.
通常情況下，設計和建立一個網絡應用或網站在移動端的用戶體驗，會等到其桌面版完成之后才進行。
那 “移動優先” 的響應式設計流程，就是這個樣子的，如圖所示：
Luke 提出這個觀點的時候，其實討論了手機 APP 的各種優勢，這個不是我們的關心內容，我們這里的“移動優先的響應式設計”只是針對網站設計而言的。指的是，先開發手機版網頁，css 文件中的默認樣式就是手機版頁面的，然后通過 media-query，逐步添加樣式進來，達成平板和桌面版網頁。
簡而言之，傳統的響應式設計流程是，先桌面電腦，再平板，后手機。移動優先的響應式設計的流程正好相反，先手機，后平板，最后是桌面電腦。
## 2.為何要移動優先
首先從市場份額角度來聊，隨著移動互聯網的爆發，如果還認為大家主要用桌面機訪問網頁，而只是“偶爾”使用手機來訪問，手機端頁面“可有可無”，那么這種觀點肯定已經過時了。好，我承認現在手機端的很多流量是走 APP 的，但是不可否認移動端網頁體驗也變得越來越重要。
咱們都是開發者，所以現在來從技術實現的角度來聊。明顯的一個事實，手機屏幕尺寸小，桌面電腦大。那么先設計手機頁面意味著先設計一個簡單版本的頁面，然后隨著平板版和桌面版的引入，頁面會慢慢變得復雜起來，這是一個遞增過程，是一個前期精力只放到最核心功能模塊上的過程，不僅僅是思路上由簡入繁，清爽怡人，同時當用手機打開網頁的時候，默認打開的只是相對比較簡單的手機版樣式，而復雜一些的桌面版的相應樣式都在 media-query 中包裹著，所以不會加載，那么這樣頁面訪問速度是最佳的。
.content {
/* 一些簡單的樣式，專門為手機而生 */
}
@media screen and (min-width: 400px) {
.content {
/* 為大屏設備設計的比較復雜的樣式 */
}
}
同樣，如果手機版頁面是默認的，一些鼠標滑過效果，甚至是陰影，動畫效果，圖片等各種手機上用不到或者是不必要的內容也是可以用同樣的上面的方法來避免在手機訪問的時候加載的。
.content {
backgound: #bada55;
/* 手機上也許實現一個簡單的顏色就很好看了 */
}
@media screen and (min-width: 800px) {
.content {
background-image: url("bg.png");
}
/* 電腦訪問的時候再來加載大圖，和鼠標滑過等效果 */
.content:hover {
...
}
}
具體的，可以查看這個例子：[button demo ](http://codepen.io/kinghs/pen/gLeZzz)。（ 如果你正在用普通桌面電腦來打開這個 demo 那么可以把瀏覽器先拉窄，這樣可以模仿出手機屏幕的效果，可以看到頁面加載的按鈕樣式是非常簡單的，下面來不斷拉寬瀏覽器，到達一個臨界點好，桌面版的按鈕樣式就會顯示出來）。
但是反之，如果我們先有了一個桌面版的復雜網頁，然后想要逐步做減法來最終達成手機版網頁，那么這個過程就會很困難，容易造成重復設計勞動，如果處理不好，還可能導致臃腫的代碼。
## 3.移動優先布局實例
在從頁面大塊布局角度來看看移動優先。手機屏幕比較窄，所以如果有兩個大塊，一般就可以上下排布，這樣就是頁面的一般流程。不需要設置 css 就可以達成。如下圖：
當到了大屏幕上面，可以再用 media-query 來引入 float 等 css 樣式，達成左右排列的效果。
代碼很簡單，可以看下[移動優先案例](http://codepen.io/kinghs/pen/gLeZZj)
也可以看看一些響應式網站的效果： [mediaqueries](http://mediaqueri.es/)
## 4.King的忠告
其實是否移動優先也要考慮具體的實際情況，相信大家現在手上一般都是有做好的PC項目，想要改為響應式，要移動優先是不太可能的了。其實不管道路是從大到小還是從小到大，最終達成的結果是應該是差不多的結果，那就是一個在手機端還是桌面端表現都非常好的網站。但是，”移動優先“的策略的確越來越被大家接受為響應式設計的最佳實踐了。所以以后再做項目或者練手的時候，一定要推崇移動優先。
## 5.參考資源
* [google 和 udacity 的響應式課程的 mobile first 章節](https://www.udacity.com/course/viewer#!/c-ud893/l-3494350031/m-3473199720)
* [Responsive Web Design](http://learn.shayhowe.com/advanced-html-css/responsive-web-design/)
* [按鈕樣式來自 materializecss](http://materializecss.com/buttons.html)，顏色選自[colordrop色盤](https://colordrop.io/)
* [Creating a Mobile-First Responsive Web Design](http://www.html5rocks.com/en/mobile/responsivedesign/)
