JavaScript
jQuery

window.matchMedia は超便利な件

レスポンシブデザインのサイトを構築していく中で、「この横幅の時はこうで、それ以上はこう・・・」なんて場面があると思います。

それがJavaScriptを利用してスライダーを使用していた場合、

・767px以下の時はスライダーは解除する。

・それ以上の場合はスライダーが動く

なんてのを今までは

$(window).on('resize', function(){

var myWindowWidth = $(window).width();
if(myWindowWidth < 767){
hoge();
}else{
hogehoge();
}
});

なんてやってましたが、リサイズするたびイベントが行われるのでスライダーの挙動を制御しきれない場面がありました。

他にもTimerを利用したりとしていましたが綺麗では無い。

そこでこれ。「window.matchMedia」です。

とある点(ブレイクポイント)を通過したときのみ、イベントが発火します。

例えば定番ライブラリ「slick」を利用した場合、上記の動きを実現させるには

$(document).ready(function(){

$([selector]).slick(); //とりあえず一回起動
if(window.matchMedia("(max-width:767px)").matches){
// 読み込みが完了したときに、767px以下の場合に行いたい処理
$([selector]).slick('unslick'); //スライダー解除
}else{
// 読み込みが完了したときに、767px以上の場合に行いたい処理
}
function matchFunc(){
if(window.matchMedia("(max-width:766px)").matches){
// windowサイズを変更して、766px以下になったら行うイベント
$([selector]).slick('unslick'); //スライダー解除
}
if(window.matchMedia("(min-width:767px)").matches){
// windowサイズを変更して、767px以上になったら行うイベント
$([selector]).slick(); //スライダー起動
}
}
window.matchMedia("(max-width:767px)").addListener(matchFunc);
});

とこんな感じです。

スッキリとして見栄えもいいです。