CSS3媒體查詢： 語法： <media_query_list>：<media_query>[,<media_query>] <media_query>：only|not <mediaType> and <expression>[ and <expression>] <expression>：<me ...
CSS3媒體查詢：語法：<media_query_list>：<media_query>[,<media_query>]<media_query>：only|not <mediaType> and <expression>[ and <expression>]<expression>：<mediaFeature>:<value>關鍵詞“not”取補集，“only”不再推薦使用（not，only都是可選的），“,”用法同CSS選擇器中的逗號用法，表示一種合寫。
@media not|only mediaType and (mediaFeature) { CSS Codes;}或<link rel="stylesheet" media="not|only mediaType and (mediaFeature)" href="mystylesheet.css">或<style type="text/css" media="not|only mediaType and (mediaFeature)"> @import url("mystylesheet.css");</style>
及：（這種可以在style標簽里使用，也可以在一個css文件里使用）@media not|only mediaType and (mediaFeature){ 選擇器{ 屬性:屬性值; }}
媒體查詢大部分都接受首碼min或max，表示大於等於或小於等於。（切記min和max對應的順序，不要被表象所誤導）and前後必須留空格，例如：（瀏覽器不產生任何效果）@media screen and(max-width:600px){ h2{ color:red }}
媒體類型：（一些類型已從CSS3刪除）all --用於所有設備print --用於印表機及列印預覽screen --用於電腦、平板、手機屏幕（一般只用這個和all）speech --用於屏幕閱讀器等發聲設備
媒體特性：width --頁面可見區域的寬（一般只用這個和device-width）height --頁面可見區域的高device-width --設備的屏幕可見區域寬device-height --設備的屏幕可見區域高aspect-ratio --設備的width與height的比device-aspect-ratio --設備的device-width與device-height的比resolution --設備的解析度，如96dpi, 300dpi，118dpcmorientation --定義height是否大於或等於width，值portrait代表是，landscape代表否以上參數（除最後一個）均可以加max-或min-首碼。前四個參數比較常用，單位都是CSS的絕對單位，包括px em mm cm等。部分用法：@media screen and (orientation:portrait){ h2{ color:red; /* 頁面的高>=寬，h2變紅 一般用於檢測設備處於橫向還是縱向，portrait豎屏 */ }}
@media screen and (max-aspect-ratio:4/3){ h2{ color:red; /* 頁面的寬比高<=4比3，h2變紅 不加max或min首碼表示絕對等於，比如aspect-ratio:4/3表示只有寬比高是4/3時候才執行css代碼，對於width這樣之類的屬性同理 */ }}
@media screen and (min-resolution:96dpi){ h2{ color:red; /* 設備屏幕解析度>=96dpi，h2變紅 你也可以用118dpcm這樣的單位 */ }}全部參數詳見：http://www.runoob.com/cssref/css3-pr-mediaquery.html
常用的幾種屏幕寬度設定：@media screen and (min-width:1200px) { css-code;}@media screen and(min-width:960px) and (max-width:1199px) { css-code;}@media screen and(min-width:768px) and (max-width:959px) { css-code;}@media screen and(min-width:480px) and (max-width:767px) { css-code;}@media screen and (max-width:479px) { css-code;}
使用JS動態查詢媒體特征：window.matchMedia()方法接受一個media_query語句的字元串作為參數，返回一個MediaQueryList對象，該對象有media和matches兩個屬性。media：返回所查詢的media_query語句字元串matches：返回一個布爾值，表示當前環境是否匹配查詢語句註意：如果matchMedia無法解析media_query參數，matches屬性返回的總是false，而不是報錯例如：var result = window.matchMedia("screen (min-width: 600px)");console.log(result.media); //"(min-width: 600px)"console.log(result.matches); //true
matchMedia方法返回的MediaQueryList對象有兩個方法，用來監聽事件：addListener和removeListenermql.addListener(mqCallback);mql.removeListener(mqCallback);註意，只有mediaQuery查詢結果發生變化時，才調用指定的回調函數mqCallback，所以，如果想要mediaQuery查詢未變化時，就顯示相應效果，需要提前調用一次函數。
下麵這個例子是當頁面寬度小於1000px時，頁面背景顏色為品紅色；否則為淡藍色：var mql = window.matchMedia("(min-width: 1000px)");//mql = media query listfunction mqCallback(mql){ if (mql.matches){ document.body.background = 'pink'; }else{ document.body.background = 'lightblue'; }}mqCallback(mql);mql.addListener(mqCallback);//註意，addListener觸發條件是每次改變matches值時，只有true<->false才是叫做改變，true<->true或false<->false不算改變也不會觸發addListener。
