CSS3媒體查詢： 語(yǔ)法： <media_query_list>：<media_query>[,<media_query>] <media_query>：only|not <mediaType> and <expression>[ and <expression>] <expression>：<mediaFeature>:<value> 關(guān)鍵詞“not”取補(bǔ)集，“only”不再推薦使用（not，only都是可選的），“,”用法同CSS選擇器中的逗號(hào)用法，表示一種合寫。
@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標(biāo)簽里使用，也可以在一個(gè)css文件里使用） @media not|only mediaType and (mediaFeature){ 選擇器{ 屬性:屬性值; } }
媒體查詢大部分都接受前綴min或max，表示大于等于或小于等于。（切記min和max對(duì)應(yīng)的順序，不要被表象所誤導(dǎo)） and前后必須留空格，例如：（瀏覽器不產(chǎn)生任何效果） @media screen and(max-width:600px){ ? ? h2{ ? ? ? ? color:red ? ? } }
媒體類型：（一些類型已從CSS3刪除） all? ? ?--用于所有設(shè)備 print? ?--用于打印機(jī)及打印預(yù)覽 screen? --用于電腦、平板、手機(jī)屏幕（一般只用這個(gè)和all） speech? --用于屏幕閱讀器等發(fā)聲設(shè)備
媒體特性： width? ? ? ? ? ? ? ? --頁(yè)面可見區(qū)域的寬（一般只用這個(gè)和device-width） height? ? ? ? ? ? ? ?--頁(yè)面可見區(qū)域的高 device-width? ? ? ? ?--設(shè)備的屏幕可見區(qū)域?qū)?/span> device-height? ? ? ? --設(shè)備的屏幕可見區(qū)域高 aspect-ratio? ? ? ? ?--設(shè)備的width與height的比 device-aspect-ratio? --設(shè)備的device-width與device-height的比 resolution? ? ? ? ? ?--設(shè)備的分辨率，如96dpi, 300dpi，118dpcm orientation? ? ? ? ? --定義height是否大于或等于width，值portrait代表是，landscape代表否 以上參數(shù)（除最后一個(gè)）均可以加max-或min-前綴。 前四個(gè)參數(shù)比較常用，單位都是CSS的絕對(duì)單位，包括px em mm cm等。 部分用法： @media screen and (orientation:portrait){ ? ? h2{ ? ? ? ? color:red; /* 頁(yè)面的高>=寬，h2變紅 一般用于檢測(cè)設(shè)備處于橫向還是縱向，portrait豎屏 */ ? ? } }
@media screen and (max-aspect-ratio:4/3){ ? ? h2{ ? ? ? ? color:red; /* 頁(yè)面的寬比高<=4比3，h2變紅 不加max或min前綴表示絕對(duì)等于，比如aspect-ratio:4/3表示只有寬比高是4/3時(shí)候才執(zhí)行css代碼，對(duì)于width這樣之類的屬性同理 */ ? ? } }
@media screen and (min-resolution:96dpi){ ? ? h2{ ? ? ? ? color:red; /* 設(shè)備屏幕分辨率>=96dpi，h2變紅 你也可以用118dpcm這樣的單位 */ ? ? } } 全部參數(shù)詳見：http://www.runoob.com/cssref/css3-pr-mediaquery.html
常用的幾種屏幕寬度設(shè)定： @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動(dòng)態(tài)查詢媒體特征： window.matchMedia()方法接受一個(gè)media_query語(yǔ)句的字符串作為參數(shù)，返回一個(gè)MediaQueryList對(duì)象，該對(duì)象有media和matches兩個(gè)屬性。 media：返回所查詢的media_query語(yǔ)句字符串 matches：返回一個(gè)布爾值，表示當(dāng)前環(huán)境是否匹配查詢語(yǔ)句 注意：如果matchMedia無(wú)法解析media_query參數(shù)，matches屬性返回的總是false，而不是報(bào)錯(cuò) 例如： var result = window.matchMedia("screen (min-width: 600px)"); console.log(result.media); //"(min-width: 600px)" console.log(result.matches); //true
matchMedia方法返回的MediaQueryList對(duì)象有兩個(gè)方法，用來(lái)監(jiān)聽事件：addListener和removeListener mql.addListener(mqCallback); mql.removeListener(mqCallback); 注意，只有mediaQuery查詢結(jié)果發(fā)生變化時(shí)，才調(diào)用指定的回調(diào)函數(shù)mqCallback，所以，如果想要mediaQuery查詢未變化時(shí)，就顯示相應(yīng)效果，需要提前調(diào)用一次函數(shù)。
下面這個(gè)例子是當(dāng)頁(yè)面寬度小于1000px時(shí)，頁(yè)面背景顏色為品紅色；否則為淡藍(lán)色： var mql = window.matchMedia("(min-width: 1000px)");//mql = media query list function mqCallback(mql){ if (mql.matches){ document.body.background = 'pink'; }else{ document.body.background = 'lightblue'; } } mqCallback(mql); mql.addListener(mqCallback); //注意，addListener觸發(fā)條件是每次改變matches值時(shí)，只有true<->false才是叫做改變，true<->true或false<->false不算改變也不會(huì)觸發(fā)addListener。

總結(jié)

以上是生活随笔為你收集整理的CSS3及JS媒体查询教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。