1.Media Query的使用方法 首先我們在使用Media的時候需要先設置下面這段代碼，來兼容移動設備的展示效果： ~~~ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ~~~ 參數解釋： width = device-width：寬度等于當前設備的寬度 initial-scale：初始的縮放比例（默認設置為1.0） minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0） maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0） user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面） 使用： @media 設備類型 and （設備特性）{樣式代碼} 2.Ｍedia Query的設備類型（10種） all：所有設備 screen：電腦顯示器 print：打印用紙或打印預覽視圖 handled：便攜設備 tv：電視機類型的設備 … 3.CSS中的Media Query的設備特性（13種） 設備寬高：device-width,device-height 渲染窗口的寬和高：width,height 設備的手持方向：orientation 設備的分辨率：resolution … 4.使用方法：（ 外聯和內嵌樣式） ~~~ //外聯 @import url(style.css) screen and (min-width:1000px); <link rel="stylesheet" href="style.css" media="only screen and (max-width:640px)"> //內嵌樣式： <style> @media screen and (min-width:640px) { body{ background:coral; } } </style> ~~~ 注意:only關鍵字的作用是，讓那些不支持Media Query但是能夠讀取Media Type的設備的瀏覽器將表達式中的樣式隱藏起來。 > @media only screen and (color){樣式代碼} 對于支持Media Query的設備來說，正確應用該樣式；對于不支持Media Query但能夠讀取Media Type的設備，由于先讀取到的是only 而不是screen，將忽略該樣式。