響應式并不一定是最好的選擇
如果一個點餐網站預算充足，定制一個手機移動版，可以基于GPS在附近店家點餐或者一個dashboard網站有大量數據內容和管理指令，那么單獨的響應式設計可能遠遠不足
如果大多用戶使用IE7,8或者更低版本那么響應式意義也不大
響應式設計是基于流動布局、彈性圖片、彈性表格？？？、彈性視頻和媒體查詢等技術的組合。是用百分比布局創建流動的彈性界面，同時使用媒體查詢，來限制元素的變動范圍。
流動布局不固定div的寬度，而是采用百分比或者em，rem。需要注意的是當em的百分比尺寸時，目標元素尺寸÷上下文元素尺寸=百分比尺寸， 上下文尺寸并不一定永遠是父元素的大小。
比如
默認瀏覽器文字大小是 16px，假設設計稿里 h1 為 69px, span 為 38px，line-height 為 40px，可以看到元素的文字大小（38px）是相對于其父元素的文字大小（69px）而言的，而它的行高（40px）則是相對于其本身的文字大小（38px）而言，所以我們不能一概而論認為上下文元素就是等同于父級元素。
工作原理
應用css3的媒體查詢，創建一個包和各種設備尺寸樣式的CSS。一旦頁面在設備上加載，此時會先檢查視口大小，然后加載特定樣式。
viewport視口
視口是可視區域大小之瀏覽器窗口內的內容區域，不包含工具欄、標簽欄等。
屏幕尺寸screen.width
設備的物理顯示區域
grid view 柵格化
柵格化就是頁面被分成多列。一般響應式的柵格化會分成12列，總寬度100%，能夠根據窗口大小變化收縮和擴展。首先要保證所有的html元素有box-sizing屬性并設置為border-box。這讓padding和border都算入總的width和height中。即：
*{
box-sizing: border-box;
}
.col-1 {
?width: 8.33%;
}
.col-2{
width: 16.66%;
}
....
[class* = "col-"] {
?float
}
media queries 媒體查詢
1. @media screen and (max-width:960 px){
? ? ? ? body{
? ? ? ? ? ? ?...
? ? ? ? ?}
? ? ? ?} ? ?
@media screen and (max-width:550 px){
body{
...
}
}
???順序有講究吧 從大到小
對于老版本不支持媒體查詢，可以引入polyfill腳本（膩子腳本polyfill目的就是填平舊版本瀏覽器對html5、css3的支持上的缺陷，基于js實現進行兼容修復）。這樣的腳本有Respond.js，css3-meadiaqueries.js...
2.HTML4和css2中可以通過<link>標簽的media屬性為樣式表制定設備類型，有8種，screen和print為常見，打印時用襯線字體顯示更好的可讀性，屏幕上則用無襯線
css3中增加了更多查詢，可以設置不同類型的媒體條件。
<link rel="stylesheet" media="screen and (orientation: portrait) and （min-width:800px）， projection" href="portrait.css">縱向顯示屏， projection？？？
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portraitcss">優先級如何？？？
3.@import url("phone.css") screen and (max-width: 360px); @import影響加載速度
link與@import的差別
兼容性差別，IE6以下不支持@import
加載順序差別
link支持使用js控制dom去改變樣式，@import不支持
@import在iE中會導致文件下載順序被改變，放在@import之后的script文件會在css之前被下載執行，這樣可能導致js在進行與樣式相關操作的時候出錯
圖片
1. img, object,video,embed { max-width: 100%，height: auto} /object embed???/
如果用{width: 100%}圖片也能伸縮但可能超過原大小
2. 給外層#wrapper設置max-width限制流體布局被拉大
#wrapper{
?margin-left: auto;
?margin-right: auto;
?width:96%;
?max-width: 1414px;
}
???為啥同時有width max-width
其實應該為不同屏幕提供不同尺寸的圖片。
視頻
1. Safari只允許在<video>和<audio>中使用MP4、H.264、AAC媒體文件，而firefox和opera只支持ogg和WebM。
<video width="640" height="480" controls autoplay proload="auto" loop poster>
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mpv" type="video/mp4">
</video>
video{
?max-width:100%;
height: auto;
}
2. iframe引入的視頻實現響應式
<script src="js/fitvids.js"></script>
<script>
$(document).ready(function(){
$("#content").fitVids();
});
</script>
表格
流體表格不等于響應式表格，比如一個百分比寬度表格，在小屏幕設備上可以正常顯示，但是內容整體被壓縮小，可能性差，并不代表真正的響應。
1.隱藏不必要的列
2.將橫向表頭利用css改為縱向顯示并固定位置，使用橫向滾動條，tbody上應用whitespace：nowrap；tr下應用display：inline-block？？？
3. 將每一行數據對應表頭顯示在一塊區域，接下來每一行以此類推。利用html data屬性將表頭寫在css中 td:before{content: attr（data-title）}；？？？
4. 將純文本的表格在小屏幕上的餅圖或柱狀圖，以一種更豐富的形式顯示
5.用戶一張小縮略圖顯示并提示用戶點擊查看表格
