css3@media實現原理

window.matchMedia()

基本用法

window.matchMedia方法用來檢查CSS的mediaQuery語句。各類瀏覽器的最新版本（包括IE 10+）都支持該方法，對於不支持該方法的老式瀏覽器，能夠使用第三方函數庫matchMedia.js。

CSS的mediaQuery語句有點像if語句，只要顯示媒介（包括瀏覽器和屏幕等）知足mediaQuery語句設定的條件，就會執行區塊內部的語句。下面是mediaQuery語句的一個例子。

@media all and (max-width: 700px) { body { background: #FF0; } } 

上面的CSS代碼表示，該區塊對全部媒介（media）有效，且視口的最大寬度不得超過700像素。若是條件知足，則body元素的背景設爲#FF0。

須要注意的是，mediaQuery接受兩種寬度/高度的度量，一種是上例的「視口」的寬度/高度，還有一種是「設備」的寬度/高度，下面就是一個例子。

@media all and (max-device-width: 700px) { body { background: #FF0; } } 

視口的寬度/高度（width/height）使用documentElement.clientWidth/clientHeight來衡量，單位是CSS像素；設備的寬度/高度（device-width/device-height）使用screen.width/height來衡量，單位是設備硬件的像素。

window.matchMedia方法接受一個mediaQuery語句的字符串做爲參數，返回一個MediaQueryList對象。該對象有如下兩個屬性。

• media：返回所查詢的mediaQuery語句字符串。
• matches：返回一個布爾值，表示當前環境是否匹配查詢語句。

var result = window.matchMedia('(min-width: 600px)'); result.media // (min-width: 600px) result.matches // true 

下面是另一個例子，根據mediaQuery是否匹配當前環境，執行不一樣的JavaScript代碼。

var result = window.matchMedia('(max-width: 700px)'); if (result.matches) { console.log('頁面寬度小於等於700px'); } else { console.log('頁面寬度大於700px'); } 

下面的例子根據mediaQuery是否匹配當前環境，加載相應的CSS樣式表。

var result = window.matchMedia("(max-width: 700px)"); if (result.matches){ var linkElm = document.createElement('link'); linkElm.setAttribute('rel', 'stylesheet'); linkElm.setAttribute('type', 'text/css'); linkElm.setAttribute('href', 'small.css'); document.head.appendChild(linkElm); } 

注意，若是window.matchMedia沒法解析mediaQuery參數，返回的老是false，而不是報錯。

window.matchMedia('bad string').matches // false 

監聽事件

window.matchMedia方法返回的MediaQueryList對象有兩個方法，用來監聽事件：addListener方法和removeListener方法。若是mediaQuery查詢結果發生變化，就調用指定的回調函數。

var mql = window.matchMedia("(max-width: 700px)"); // 指定回調函數 mql.addListener(mqCallback); // 撤銷回調函數 mql.removeListener(mqCallback); function mqCallback(mql) { if (mql.matches) { // 寬度小於等於700像素 } else { // 寬度大於700像素 } } 

上面代碼中，回調函數的參數是MediaQueryList對象。回調函數的調用可能存在兩種狀況。一種是顯示寬度從700像素以上變爲如下，另外一種是從700像素如下變爲以上，因此在回調函數內部要判斷一下當前的屏幕寬度。