📨 🚺 👎🏾 window.matchMediaを使用しないレスポンシブjQuery 🎼 🏦 👋🏽

通常のバスの代わりに電動自転車。 jQueryスクリプトを適応させる方法を共有したい（私はjQueryスクリプトを自分で書くことに慣れていますが、違いはありません。説明したものはすべて純粋なJavaScriptにも当てはまります）、Webレイアウトを適応させます。

さまざまな画面解像度とさまざまなデバイスに適応するために、CSSでメディアクエリを使用します。 0〜479ピクセルと最大800ピクセルの2つの範囲にレイアウトを適合させたとします。

@media screen and (max-width: 800px) { /* CSS */ } /*  */ @media screen and (max-width: 479px) { /* CSS */ }

画面サイズに応じて、異なるアニメーションやサーバーリクエストを使用します。つまり JavaScriptスクリプトでCSSからの銅線リクエストに並行して応答する必要があります。これを行うには、少なくとも3つの方法があります。

アカデミック 。特別なjavascriptメソッド： window.matchMediaは、CSSと同様のメディアリクエストの応答を決定します。

 var mql = window.matchMedia('all and (max-width: 479px)'); if (mql.matches) { //   479px   } else { // ,    479px }

この方法の欠点は、CSSとjavascriptの2つの場所で画面解像度の範囲を明示的に示すことです。 CSSで範囲を変更する場合、JavaScriptで範囲を変更することを忘れることがあります。その結果、サイトにバグが発生し、特定のウィンドウ幅でレイアウトが調整され、対応する機能またはアニメーションがまだ接続されていません。さらに、古いバージョンのブラウザではこのメソッドのサポートに制限があります。

松葉杖法No. 1 最も簡単でおそらく明らかな方法は、現在のブラウザウィンドウサイズをチェックする条件をスクリプトに追加することです。

この方法のマイナス点には、CSSおよびJavaScriptでの画面サイズの重複の存在と、さまざまなプラットフォームで適切なクロスブラウザーウィンドウサイズを取得する際の問題も含まれます。

松葉杖法番号2 。次に、使用する方法について説明します。各範囲のhtmlフラグの使用で構成されます。フラグは、必要なサイズ範囲にのみ表示される実際のレイアウト設計、または空の単一ピクセルdivである場合があります。

HTML：

 <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div class=”max_width_800”></div> <div class=”max_width_479”></div> </body> </html>

CSS：

 .max_width_800{ display: none; } .max_width_479{ display: none; } @media screen and (max-width: 800px) { .max_width_800{ display: block; } .max_width_479{ display: none; } } @media screen and (max-width: 479px) { .max_width_800{ display: none; } .max_width_479{ display: block; } }

スクリプト自体では、マーカーが表示されているかどうかを確認するだけです。

 if ($('.max_width_800').is(':visible')) { //  jQuery } if ($('.max_width_479').is(':visible')) { //  jQuery }

この例では、CSSでのみ画面サイズの範囲を明示的に指定します。変更する場合、スクリプトのパフォーマンスを心配する必要はありません。また、最後の例のブラウザ間の互換性は、メディアクエリのブラウザサポートによってのみ影響を受けます。

必要な場合にのみ、モバイルスクリプトを接続します。

 var head = $('head'); includeScripts(head); $(window).resize(function(){ includeScripts(head); }); function includeScripts(head){ if ($('.max_width_800').is(':visible')) { head.append('<script type="text/javascript" src="mobile-800.js" id=”script-mobile-800”></script>'); $('#script-mobile-479').remove(); } if ($('.max_width_479').is(':visible')) { head.append('<script type="text/javascript" src="mobile-479.js" id=”script-mobile-479”></script>'); $('#script-mobile-800').remove(); } }

ご清聴ありがとうございました！

window.matchMediaを使用しないレスポンシブjQuery

More articles: