レスポンシブデザインのサイトを実装する際に、CSSにメディアクエリを書き込んで特定の横幅の場合は表示を変えたりしますよね。
メディアクエリだけで対応できれば良いのですが、中にはメディアクエリだけでは対応が難しい場合もあります。
そんな時は、特定の画面幅になった時だけbodyタグに特定のクラスをつけられると、全体の構成を一気に変えられて楽だったりします。
ということで、今回はそんな感じのスクリプトをjQueryで実装する方法をご紹介します。
広告
スクリプトの実装例
今回は画面幅が600px以下になったらbodyタグに「sp-change」のクラスを付けるスクリプトを作りました。
スクリプトの内容は下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const CHANGE_WIDTH = 600; // 変更を検知する横幅 const ADD_CLASS = "sp-change" // 追加するクラス $(window).on('load resize', function(){ var i_width = $(window).outerWidth(true); if(i_width > CHANGE_WIDTH){ if($('body').hasClass(ADD_CLASS)){ $('body').eq(0).removeClass(ADD_CLASS); } } else { if(!$('body').hasClass(ADD_CLASS)){ $('body').eq(0).addClass(ADD_CLASS); } } }); |
1行目を700に変えれば700以下で特定のクラスが付くようになります。
「sp-change」 のクラス名を変えたい場合は、2行目の 「sp-change」 を違う文言に変えるだけでOKです。
実装のポイントは、loadイベントだけでは画面幅を変えたときに処理が行われず、resizeイベントだけではページを読み込んだ際に横幅が指定サイズ以下でも処理が行われないため、どちらのイベントでも処理が行われるようにしている点にあります。
本スクリプトを応用すれば、もっと細かい条件で1000px以上なら〇〇のクラスを付ける、900px～700pxまでは××のクラスを付けるなどの刻み方もできます。
ぜひ試してみてください。