Responsive.jsの紹介 [necotech blog]

Responsive.jsの紹介

2015.11.17

レスポンシブサイトのコーディング時に役立つ、軽量ユーティリティを開発しました。このサイトでも使用しています。

使い方

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

簡単に使えるように、あえて全てグローバル関数として定義していますが、適宜修正してもらってかまいません。レスポンシブに限りませんが、こういう小さなユーティリティとして基盤を作っておくと、後々見通しのよいプログラムとしてまとめやすくなります。

Pocket

necotech

necotech blog