レスポンシブウェブデザインではCSS（スタイルシート）を画面の横幅に応じて設定したブレイクポイントを切り替えることで、HTMLコンテンツの見た目を調整しています。CSSではメディアクエリを利用してこの切り替えを実施していますが、JavaScriptの切り替えはどのように行えばよいのでしょうか？

今回はレスポンシブウェブデザインでブレイクポイント毎にJavaScriptの切り替えを実現するjQueryの実装方法をご紹介します。

実装例

実装例は以下になります。

<script type="text/javascript">
jQuery(document).ready(function($) {
	//600px以上の場合
	if (window.matchMedia( '(min-width: 600px)' ).matches) {
$(function(){
    $("#sample").mouseover(function(){
        $(this).toggleClass('pc');
    });
});
	//600px以下の場合
	} else {
$(function(){
    $("#sample").mouseover(function(){
        $(this).toggleClass('smartphone');
    });
});
	};
});
</script>

#sampleセレクタに対してデバイス幅に応じて付与するclassを変更させる記述です。これにより、例えばトグルメニューの見せ方をデバイスの幅によって変えることができ、より柔軟な実装が可能になります。

他にも、設定するjavascriptにより、アイディア次第で応用を効かせることもできます。

終わりに

レスポンシブウェブデザインではCSSでデバイス毎の調整を実現していますが、JavaScriptもデバイス幅に応じた調整が可能です。サイトの表現幅を広げる方法ですので、是非一度お試しください。