本文來自我的前端博客，原文地址：http://www.hacke2.cn/about-responsive/
跨終端時代的到來
當你乘坐各種交通工具(公交、地鐵、輕軌、火車)時你會發現，人們都個個低下頭在玩自己的手機、平板、Kindle，沒錯，你正在處於一個多終端設備的時代！手機用戶連年上升，前幾天我們在感嘆以前玩沙包、陀螺，現在小孩的娛樂就是玩手機–。另外，微軟的Xbox和任天堂的Wii等遊戲設備也有自己的瀏覽器。設備真的來了。。
現在網站主流跨終端的有以下方式：
單域
比如前端亂燉和我的個人博客都屬於此一類。此類網站具有隻編寫一次就能實現跨終端的需求，維護起來相當方便。但缺點也很明顯，加載不必要的JS和CSS比往常相比巨多。
單域還有一種情況，就是多個模板，你用移動設備可能訪問一個網站，最底下會有訪問桌面版，訪問觸屏版等，他會重新加載模板。
提示訪問移動版
隨之進入移動版，HTML結構也會發生變化
多域
如神馬搜索和百度(http://www.baidu.com)，當用桌面瀏覽器和移動瀏覽器訪問的結果是不一樣的。其中的手段可能有兩種：
- Ngix反向代理判斷
- 服務端直接判斷UA輸出不同的界面，JAVA和PHP等後臺語言都提供了支持框架
兩家都對移動端做了專門的頁面，這樣進行功能的拆減，用戶體驗當然大大提高，但有需求發生變化時，往往要更改兩處地方。
多終端
也就是前端最不想看到的，很多公司爲了提高更好地用戶體驗都使用native開發，如IOS的OC,SWIFT，Andriod SDK等。功能強大，接口豐富，缺點就是更新起來異常困難，很多用戶都不想過幾天就安裝一個APP。
本文主要講第一種單域(響應式)的情況
響應式Web
響應式Web設計最早在2010年EthanMarcotte發表過一篇文章《Responsive Web Design》，基本每本將響應式的書籍都將他提起，那個例子太經典提起，文中援引了響應式建築設計的概念：
最近出現了一門新興的學科——”響應式建築(responsive architecture)”——提出，物理空間應該可以根據存在於其中的人的情況進行響應。結合嵌入式機器人技術以及可拉伸材料的應用，建築師們正在嘗試建造一種可以根據周圍人羣的情況進行彎曲、伸縮和擴展的牆體結構；還可以使用運動傳感器配合氣候控制系統，調整室內的溫度及環境光。已經有公司在生產”智能玻璃”：當室內人數達到一定的閥值時，這種玻璃可以自動變爲不透明，確保隱私。
澄清一點，響應式站點不等同於移動站點，他只是一種開發移動站點的策略。其實按照這個說法神馬搜索是一款純粹的移動WEB APP，因爲它沒有桌面版。
爲移動而生，專注移動搜索的神馬搜索
三種佈局方式
現存的佈局哪一種更加適合做響應式的網站呢？一般來說有以下三種佈局：
固定佈局
應該是新手開發人員最喜歡用的佈局方式，簡單粗暴，設計稿是多少PX，寫CSS時就多少PX，對頁面的控制力度是最強的，上下級沒有聯繫，想調哪個就調那個，如果設置box-sizing:border-box;,甚至對整個佈局都沒有影響。
最常見的就是body使用960px的像素，有以下兩個因素：
- 適應正方形的老式屏幕；
- 兩邊補白，讓寬屏用戶不覺得那麼聚集；
- 960可以被3、4、5、6、8、10、12、15整除。
但問題是這麼做毫無響應式可言，會出現很噁心的橫向滾動條，另外，移動端的瀏覽器會默認的將網頁縮小，根本無多終端性可言。
流式佈局
在流式佈局中，度量單位不再是簡單的像素，而是百分比。這使得頁面具有可變性。
當縮小瀏覽器邊框時，萬惡的橫向滾動條消失了。缺點就是有些文本的行寬會看起來太寬，而在小屏幕看起來太窄
當然，在良好的支持CSS3的移動瀏覽器下，使用flex佈局更加有優勢！
彈性佈局
這次度量單位又變了，通常情況以em爲單位，但是em太依賴於父級，好在CSS3提供了更好的rem方式(這個demo找的不好，因爲table表格本來就有流動的屬性display:table;display:table-cell;)。
其實細想一下，選擇佈局方式其實是對度量單位的選擇!
另外還有網格佈局方式，bootstrap就是採用12柵欄佈局，另外前不久winner也談了一些淘寶提供的可伸縮佈局方案：lib.flexible，按照DEMO來看，其使用的是rem方式，在改變視窗大小的時候動態的改變基準的比例(瀏覽器默認是16px，設置器基準大小爲62.5%)。還有人提出來的混合佈局，但無論哪一種，都離不開上面固定佈局,流式佈局,彈性佈局,三種的支撐。
綜上所述，流式佈局或彈性佈局或許是響應式佈局的更好方式。
媒體查詢
難道有流式佈局或彈性佈局就夠了嗎？就像一個屌絲升職加薪就夠了？不當上CEO怎麼贏取白富美？
媒體查詢可以讓你根據在特定環境下查詢到的各種屬性值-比如分辨率，色彩深度，高度和寬度(包括設備寬度與視覺寬度)，橫向縱向,設備像素比來決定應用什麼樣的樣式。
我們可以看到我們上面的那些DEMO(我承認這個DEMO找的不好，是從今年阿里校招題目裏面摳出來的)，當我們改變瀏覽器大小時，左邊的列表實在是太醜，但是使用媒體查詢後的效果就不一樣了。
媒體查詢的語法
語法很簡單
@media [not|only] type [and] [expr] {
rules
}
解釋一下：
-
not only：邏輯關鍵字 - expr：媒體表達式
- type：媒體類型
- rules：CSS樣式
1.邏輯關鍵字
有and,not,or,only等，前三個不多說，最後一個是因爲很多較老的瀏覽器支持媒體類型，卻不支持媒體查詢，有時候導致瀏覽器去嘗試下載那些你不希望用戶看到的樣式。
2.媒體表達式
表達式支持的也很多，這裏也不列舉了，重點有: * 表示顯示區域的width和height *
表示設備區域的device-width和device-height *
表示橫屏還是豎屏的orientation *
表示設備像素比device-pixel-ratio
3.媒體類型
媒體類型有很多，感興趣下來查一下，這裏就不列舉了，一般大多網站設置的是screen，如不你嫌麻煩可以什麼都不寫(默認爲all)，支持所有設備。
4.規則
就是你想要在這個環境下想展示出的CSS
下面一個簡單的示例：
@media sreen and (min-width: 320px) {
}另外，媒體查詢也可以使用在外部樣式上，如：
<link media="only sceen and (min-width:1300px)" type="text/css" href="style.css">關於斷點
這裏說的斷點不是傳統意義的調試斷點，而是一些常用的標準寬度:
- 320px(iPhone和其他一些設備)
- 769px(iPad)
- 1024
依賴這些斷點會有一個問題，今天流行的明天未必流行，而且在斷點過渡的時候會顯得很突兀，所以，確定斷點的一個原則是追隨內容。讓設計稿，內容來確定你的斷點。
前端亂燉的斷點
兼容性
一般的，在IE9一下，加載下列CSS
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->圖片和視頻
圖片
對於背景圖片來說，CSS3有個屬性爲background-size，設置爲100%就可以自適應，但是在小屏幕的移動設備加載大圖片有點殺雞焉用宰牛刀，一般爲了加快速度，我們的策略是：有選擇性的加載圖片，一般會有以下四種方法：
1.萬能的媒體查詢
只加載與當前屏幕相匹配的圖片
2.JS做判斷
JS提供了一個方法：window.matchMedia，可以把CSS媒體查詢作爲參數傳入，返回相關媒體查詢是否匹配的信息。
使用方法：
if(window.matchMedia('(min-width:320px)').matches) {
//其他代碼
}我們可以利用他來加載合適的圖片。
3.使用src.sencha.io
src.sencha.io可以傳入需要的尺寸和圖片地址，自動來壓縮圖片，使用了CDN+緩存策略技術。當然，我們的服務端也可以自己來實現
圖片已經被壓縮到320px
4.SVG
對於圖片伸縮的問題，也可以採用可伸縮矢量圖(SGG)來解決。
有關SVG的資料請戳大漠的w3cplusSVG標籤。
視頻
視頻的方式與上面類似，可以使用媒體查詢和js
matchMedia，當然，用設備看視頻的一般是WIFI下，所以直接使用max-width:100%;height:auto;也是可以的。如果是連接站外資源，如優酷難麼，一般解決方法是放到一個iframe裏面，詳情請看站外引用的優酷視頻，怎樣讓視頻高度自適應？
<div style="width:320px;height:180px" >
<iframe height="100%" width="100%" src="http://player.youku.com/embed/XNjA3NjQ0MzE2" frameborder=0 allowfullscreen></iframe>
</div>總結
寫到這邊，算是對響應式的一個初級入門吧，但個人覺得，做起來原理簡單，但如果設計一個響應式的網站？怎樣保證他的高質量？怎麼不會影響到速度？已有網站怎麼改爲相應式的？這些纔是真正值得我們研究的東西。