レスポンシブに最適。指定した画面幅になったらアクション実行「Breakpoints.js」
Breakpoints.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
レスポンシブWebデザインでサイトを作ったとしても、ちょっと見た目にこだわろうと思うとJavaScriptによる処理が必要になります。そこで使ってみたいのがBreakpoints.jsです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.34.44.1378042805.png)
デモです。最初は1024px以上と判断されています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.34.50.1378042809.png)
画面の幅を縮めました。768になったというアクションが実行されます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.34.55.1378042813.png)
480pxになった時のアクションが実行された時には768pxではなくなった時のアクションも実行されます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.35.02.1378042816.png)
320pxの時も同様です。
デモのコードです。使い方はシンプルです。
Breakpoints.jsでは指定した画面幅になった時、またはならなくなった時に応じて指定した処理を実行できます。例えば320を指定した場合は、enterBreakpoint320で320pxになった時の処理、exitBreakpoint320で320pxでなくなった時の処理を定義すると言った具合です。
MOONGIFTはこう見る
レスポンシブWebデザインは理想的な形であり、それで全てがこなせれば良いのですがそうも単純にはいきません。特に画面幅が違うために付属した情報を出せる（または出せない）時に処理判定が必要になります。
そのような場合においてはwindow幅の変更をトリガーにして監視するのですが、Breakpoints.jsはそれを一手に引き受けてくれます。特に忘れがちな指定画面幅でなくなった場合の処理も定義できるのが便利ではないでしょうか。
Breakpoints.JS - Use real world context clues to adjust your sites content and layout - XOXCO.com