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

作成日:
📝 使用環境 Bootstrap使用をベースにしています。

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

JavaScript 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 SizeClass
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
favicon
Display property https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

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

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

ポイントとしては、

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

です。

favicon
Media Queries(メディアクエリ)とJavaScriptの連携について - Qiita https://qiita.com/r_abe01/items/a3a2e94b5162d949037b

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

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメント

Bootstrapのカルーセルをレスポンシブ対応な複数枚表示に切り替え – モノグサにお灸 さん
[…] BootstrapのブレイクポイントをjQueryで使用する方法 […]
2018年10月23日 7:13 PM 返信

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。