BootstrapのブレイクポイントをjQueryで使用する方法

BootstrapのブレイクポイントをjQueryで使用する方法



jQuery単独でメディアクエリ様のブレイクポイントを指定する場合、

$(window).on('load resize', function() {
  var windowWidth = window.innerWidth;
  if (windowWidth > 1140) {
    // デスクトップ表示時の処理
  } else if (windowWidth > 720) {
    // タブレット表示時の処理
  } else {
    // スマホ表示時の処理
  }
});

のように、幅の値をブレイクポイントとして個別に入力する方法があります。

しかし、フレームワークにBootstrapを使用しており、かつ、ブレイクポイントを任意に変更した場合に、JSファイル側もそれに合わせて修正する必要があります。
まぁ、そんなに手間では無いですが、例えばミスしやすいポイントでもあります。

そこで、元々BootstrapのCSSに実装されている、Hiding elementsを利用してブレイクポイントを代替してみます。

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block
Display property
参考
Display property

モバイルフレンドリーな開発をより迅速に行うには、デバイスごとに要素を表示および非表示にするための反応的な表示クラスを使用します。同じサイトの全く異なるバージョンを作成するのではなく、各スクリーンサイズに対応して要素を非表示にする。

Display property

例として、OLリストをウィンドウズ幅に応じて、グループに分けるようにjQueryで指定してみます。

ポイントとしては、

  • デスクトップで表示、タブレットで表示、スマホで表示する専用のDIVコンテンツを用意する(今は確認のため、テキストを表示させているが本来は不要)。
  • ウィンドウサイズが切り替わった際に、それらの表示/非表示状態を認識して、ブレイクポイントの代替とする。

です。

Media Queries(メディアクエリ)とJavaScriptの連携について - Qiita
参考
Media Queries(メディアクエリ)とJavaScriptの連携について - Qiita

レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事...

Media Queries(メディアクエリ)とJavaScriptの連携について - Qiita Qiita

今日はここまで
BootstrapのブレイクポイントをjQueryで使用する方法

BootstrapのブレイクポイントをjQueryで使用する方法


開発

jQuery単独でメディアクエリ様のブレイクポイントを指定する場合、 $(window).on('load resize', function() { var windowWidth = window…


関連する記事



こちらはいかが?


jQueryでHTMLタグを置換する
jQueryでHTMLタグを置換する

例として、ボタンをクリックしてulタグをolタグに置換しています。 See the Pen クリックしてタグを置換する by kosuke agusa (@aguko) on CodePen. でも、このままだとidやク…

jQueryでExcel書き出し
jQueryでExcel書き出し

http://jquerybyexample.blogspot.com/2012/10/export-table-data-to-excel-using-jquery.html WordPressで作成したHTMLテーブ…

1 件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)