調子にのって今回もレスポンシブのエントリーを書いた、JETBABY管理人です。
海行きたい。

・・・レスポンシブウェブデザインでサイトを作るときに、なにはなくともこれだけは使うというjQueryのプラグインの紹介です。

と、とりあえずスマホがある場合はjQueryは2系にしたほうが、動作が幾分か軽いのでいいですよ。
IE8はこのさい最低限のコンテンツが見えるだけくらいにしてね。
プログレッシブ・エンハンスメントですね。

さて本題。
jQueryを使えばレスポンシブなさいとでも色々な動きを出せたり、リッチな表現ができたりは当然できる。

ですが、今回はそういったものでなくレスポンシブの根幹部分で作用するプラグイン。
有名なので知ってる方も多いでしょうが、個人的にレスポンシブでjQueryといえばこれなので。

それは何かというと

breakpoints.js

こちらです。

何するものかといえば、ブレイクポイントごとにイベントを設定できるというもの。
設定したブレイクポイントになったら、またはブレイクポイントじゃなくなったら、という動作を設定できます。

使い方はダウンロード先のGitHubのReadMeをみれば英語が分からなくても使えるくらい簡単。

最初にbreakpointsの値に必要なブレイクポイントを設定。
enterBreakpoint～でその値になったとき、exitBreakpoint～でその値ではなくなったときの動作を記述。それだけです。

前回のレスポンシブのサンプルサイトのうちOff Canvasでこのスクリプトを使っています。
別に使わなくてもと思う程度の使い方ですが、640px基点にナビゲーションの表示非表示をしています。

使い方は色々思いつくと思いますが、レスポンシブ時の画像の変更などを紹介しているブログもあります。

実際に俺もPCとスマホで画像を変更するときなどに使用することもあったり。
まぁ、あまり画像変更するならレスポンシブじゃなくて別のHTMLにしなよ、とも思うのでどうしてもというとだけの使用にとどめていますが。

さて他に前回のサンプルでは要素の高さを揃えるのでメジャーなheightLine.jsのレスポンシブ対応版、jquery.heightLine.jsも使用しています。
本来前回のレスポンシブのサンプル程度ではなくてもいいのだけど、こっちもこのエントリーで軽くふれたかったので使った次第。

最初に書いたみたいに見た目を華やかにするようなjQueryでレスポンシブに対応したものもたくさんあるので、それらも必要に応じて使用するといいと思うのです。
スライダーとかメイソンリー系とかなんとか

まとめ記事的なのもあるので参考にしたり。
他にググちゃえばいくらでもあると思います。

しかし、今回紹介したbreakpoints.jsはレスポンシブやるときには8割くらいの確立で使いたいなと思うものなので、紹介しました。

便利ですよ。

一つだけ懸念があるとすればプラグインがぜんぜん更新されていないことくらいでしょうかね。