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要素の背景は#FF 0とする.
なお、mediaQueryは、上記の例の「ビューポート」の幅/高さと、「デバイス」の幅/高さの2つのメトリックを受け入れ、以下に例を示す.

@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オブジェクトを返します.このオブジェクトには、次の2つのプロパティがあります.

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メソッドの2つのメソッドがあります.MediaQueryクエリの結果が変化した場合、指定したコールバック関数が呼び出されます.

var mql = window.matchMedia("(max-width: 700px)"); //        mql.addListener(mqCallback); //        mql.removeListener(mqCallback); function mqCallback(mql) { if (mql.matches) { //       700   } else { //     700   } } 

上記のコードでは、コールバック関数のパラメータはMediaQueryListオブジェクトです.コールバック関数の呼び出しには2つの場合があります.1つは表示幅が700画素以上から以下、もう1つは700画素以下から以上になるので、コールバック関数内部で現在の画面幅を判断します.
転載先:https://www.cnblogs.com/Unknw/p/7662689.html