HTML5＋CSS3從入門到精通 CSS3及JS媒體查詢詳解

CSS3媒體查詢：

語法：

：[,]

：only|not and [ and ]

：:

關鍵詞「not」取補集，「only」不再推薦使用（not，only都是可選的），「,」用法同CSS選擇器中的逗號用法，表示一種合寫。

@media not|only mediaType and (mediaFeature) {

CSS Codes;

}

或

或

及：（這種可以在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，118dpcm

orientation --定義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;

/*

頁面的寬比高

不加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和removeListener

mql.addListener(mqCallback);

mql.removeListener(mqCallback);

注意，只有mediaQuery查詢結果發生變化時，才調用指定的回調函數mqCallback，所以，如果想要mediaQuery查詢未變化時，就顯示相應效果，需要提前調用一次函數。

下面這個例子是當頁面寬度小於1000px時，頁面背景顏色為品紅色；否則為淡藍色：

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觸發條件是每次改變matches值時，只有truefalse才是叫做改變，truetrue或falsefalse不算改變也不會觸發addListener。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！