window.matchMedia は超便利な件

window.matchMedia は超便利な件:

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

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

・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); 
}); 

とこんな感じです。

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