jQueryプラグインbreakpoints.jsを使って、設定したブレークポイントを監視し、イベント変更。

ブラウザのウィンドウ横サイズを変更すると、設定したブレークポイントを監視し、下のボックス「Active Breakpoints」内にブレークポイントを表示するなどのイベントを表示、変更します。この例では、ブラウザのウィンドウ横サイズをブレークポイントとして監視しているので、CSS3のmedia queryで実装するブラウザ画面の横サイズ変更監視と酷似していますが、スクリプトで実現している分、多機能です。

Active Breakpoints

1024 px

768 px

480 px

320 px

Event Log: