CSSでやってたMediaQueryがJSで必要になったときが多々ある。
いままでは、出来る限りCSSで対処できる方法を模索しておりましたが、CSSで処理しているかのようにJSで出来るようになってた！
matchMediaってのと使えばいいみたいだ！
matchMediaは、最近のブラウザは対応しているので気兼ねなく使える！

簡単な使い方としてはこんな感じ！

if(matchMedia("(max-width: 768px)").matches){
  // ブラウザサイズが768px以下のときの処理
} else {
  // ブラウザサイズが767px以上のと木の処理
}

いやーわかりやすいね！
感覚的にCSSと同じですね。

jQueryを使わなくてもresizeイベントの回数を減らせる で書いてるようにresizeイベントを使えばレスポンシブとして対応できます。

var timer = 0;
window.onresize = function () {
  if (timer > 0) {
    clearTimeout(timer);
  }

  timer = setTimeout(function () {
    resizeFunc();
  }, 200);
};

resizeFunc = function(){
  if(matchMedia("(max-width: 768px)").matches){
    // ブラウザサイズが768px以下のときの処理
  } else {
    // ブラウザサイズが767px以上のと木の処理
  }
}
resizeFunc();

こんな感じで、対応出来るのではないでしょうか。
他のやり方もできるみたいですね。

matchMedia("(max-width:768px)").addListener( resizeFunc );

resizeFunc = function(){
  // ブラウザサイズが768px以下のときの処理

  if (matchMedia("(max-width:767px)").matches) {
    // ブラウザサイズが767px以上のと木の処理
  }
}

これで切り替えの時にイベントが発生するようです。
こっちのほうが便利じゃんｗ
レスポンシブデザインを始めて、JavaScriptでの処理を敬遠をしておりましたが、なんの気兼ねもなく処理ができますね。
JavaScriptが好きなので、この技術はすごくありがたいですね。