1）媒體查詢 @media 是個好東西，至少對像我一樣剛入行的小前端做響應式是個不錯的選擇。

①我們來看看媒體查詢 頁面最大寬度的標準寫法　　　 

1 @media screen and (max-width: 960px){ 
2    　    body{ 
3         　　　background: #000000; 
4 　　　　　　　font-size:14px; 
5 　　　　　　　... 
6     } 
7 }

解讀下代碼意思：當頁面寬度小于960px時，使用以下對應樣式表.

備注：screen 意思是告知設備在打印頁面時使用無襯線體，屏幕上顯示也用無襯線字體，
現在你會去打印一張網頁嗎？不會吧！所以目前網站都不會考慮用戶去打印網站頁面，
so...screen可以不用寫，直接省去.

②這是媒體查詢 頁面最小寬度的標準寫法　　 

1 @media screen and (min-width:960px){ 
2     　　body{ 
3        　　　background:#000000; 
4 　　　　　　　font-size:14px; 
5 　　　　　　　... 
6     } 
7 }

代碼意思：當頁面寬度大于960px時，使用以下對應樣式表.

③當然我們也可以媒體查詢一個頁面區間寬度，　　　

1 @media screen and (min-width:960px) and (max-width:1200px){ 
2 　　　body{ 
3        　　　background:#000000; 
4 　　　　　　　font-size:14px; 
5 　　　　　　　... 
6     　　} 
7 }

上面代碼大概意思是：當頁面寬度大于960px，
小于1200px時([960px,1200px])，使用以下樣式表.

④ 媒體查詢的其他參數　　

以上是我們在開發過程中常用到的三種媒體查詢特性小于、大于、等于，
除此之外她還有其他特性，下面是我查找總結媒體查詢的其他參數和用法.

　　　　　　width/height：瀏覽器可視寬度(也叫視口)/瀏覽器可見高度.

　　　　　　device-width/device-height：設備屏幕寬度/設備屏幕高度.

　　　　　  color:檢測顏色的位數。（例如：min-color:32  就是檢測設備是否擁有32位顏色 #000000）

　　　　　  color-index:檢查設備索引顏色表中的顏色(顏色值不能小于0)。

　　　　　　orientation：判斷當前設備是橫屏還是豎屏.

　　　　　  aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(現在寬高比為16:9是最佳的，
比如我做的直播窗口，要求寬高比就是16:9)

　　　　　　device-aspect-ratio:檢測設備的寬度和高度的比例。

　　　　　  resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

　　　　　  grid：檢測輸出的設備是網格設備的還是位圖設備。

　　　　　  monochrome:檢測單色楨緩沖區域中的每個像素的位數。（這個很少用得到）

　　2）媒體查詢的"局限性"

　　　我要說的這個局限性，指的是它不能用在IE8以下，IE8以下就不說了，
它目前應該被前端罵的是 身殘志堅了，IE8以下了 既不支持HTML5，也不支持CSS3的媒體查詢，
這個怎么搞...IE8以下放棄算求，但是有些公司，用戶又不多啊，
非得要求你小前端要響應式IE8以下，還好可以在項目中導入Respond.js，
這樣使用CSS3的媒體查詢就有作用了，對于這個Respond.js，小生沒實打實的用過，在這里閑扯了下，
分享一篇知乎上關于這個Respond.js用法的文章給大家：https://www.zhihu.com/question/21634225

　　3）實現響應式網頁，不止CSS3的媒體查詢能做

　　　　1. Bootstrap：

　　　　   對于這些框架，我感覺都怕用，因為它里面所有標簽的樣式都有，
你引用就好了，是節省了開發時間。對于我來說，有點難把握，做完移動端網站我就有點后悔用了它，
要說，不管什么，會寫源生的才是最Nice的.

　　　　2. JS監聽視口寬度變化從而動態更換CSS樣式表，達到最佳的響應式：

　　　　   這種方式，應該是很多攻城獅都喜歡用的，因為它精確，對于代碼冗余，
后期維護這些都比較友好，你要知道，攻城獅一般都很強調用戶體驗的.

 　　　等等...