necotech

使い方

responsive()は、Media Queriesのように横幅の最小値・最大値を指定して、その範囲内であれば処理を実行する関数です。たとえば、640px以下ならスマートフォン、それ以上かつ980px未満ならタブレットとすると、下記のように記述できます。(最大幅の指定が無い場合は、nullを渡します。)

    responsive(0, 640, function(){
  // スマートフォンの時に実行される
});

responsive(641, 979, function(){
  // タブレットの時に実行される
});

responsive(980, null, function(){
  // PCの時に実行される
});
  

responsive()のコールバック関数には、ブレイクポイントを跨いだかどうかを判定する真偽値が渡されます。たとえば、ブラウザの横幅が「650px=>630px=>620px」と変わった場合、コールバック関数は2回呼ばれますが、1回目の引数にだけtrueが渡されます。

    responsive(0, 640, function(changed){
  if(!changed) return;

  // 以下、ブレイクポイントを跨いだ時だけ実行される
});
  

matchWidthMediaQuery()は、Media Queriesを利用し、画面幅が指定した範囲内かどうかを判定します。responsive()は、内部でこの関数を利用しています。

    jQuery("#sample").on("click", function(){
  if(matchWidthMediaQuery(0, 640)){
    // smartphone
  }else if(matchWidthMediaQuery(641, 999)){
    // tablet
  }else{
    // pc
  }  
});
  

buildWidthMediaQuery()は、最小幅・最大幅を渡すと、Media Queriesで扱う文字列にして返します。通常は使用しません。

    buildWidthMediaQuery(0, 640);
// => "(min-width: 0px) and (max-width: 640px)"
  

具体例

      responsive(0, 640, function(changed){
  if(!changed) return;
  $("html").css("font-size", 24);
});

responsive(641, 979, function(changed){
  if(!changed) return;
  $("html").css("font-size", 18);
});

responsive(980, null, function(changed){
  if(!changed) return;
  $("html").css("font-size", 14);
});
    

      var object = $("#animation-object");

jQuery(".button").on("click", function(){
  object.stop().css({left: -object.width()});

  if(matchWidthMediaQuery(0, 979)){
    // スマートフォン・タブレットの時
    object.animate({left: $(window).width()});

  }else{
    // PCの時
    object.animate({left: 700});
  }
});