通常はレスポンシブでページを作成する際はcssで実装しているかと思います。
↓こんな感じに

@media screen and (max-width: 768px){
  .hoge {
    color: red;
  }
}

　
styleの出し分けに関してはこちらで問題はないのですが、jsで何か実装する際に、PC表示、スマホ表示で処理を分岐させたいシーンなどあるかと思います。

そんな時はjsでhtmlもしくはbodyにclassを付与してあげると色々な場面で活用できるかと思います。

実際に処理を書いてみましょう。

var
  _breakpoint = 768,
  _mql_width = window.matchMedia('screen and (max-width: ' + _breakpoint + 'px)'); // ブレイクポイントを設定

deviceChange(_mql_width); // ページを表示した際に実行
_mql_width.addListener(deviceChange); // ブレイクポイントで実行

function deviceChange(mql){
  var $body = $('body');

  if(mql.matches){
    $body.addClass('sp');
    $body.removeClass('pc');
  }
  else{
    $body.addClass('pc');
    $body.removeClass('sp');
  }

  $(window).trigger('deviceChange');
}

window.matchMediaはcssでよく使っている@mediaと同様の処理ができるので、それをもとにdeviceChange関数でbodyにclassを付与していきます。

_mql_width.addListenerはブレイクポイントで処理を実行する部分となっています。
　
で、さらに
$(window).trigger('deviceChange');でイベントを登録しておけばブレイクポイント処理時に何かしらの処理を追加することもできます。

$(window).on('deviceChange', function(){
  if($(body).hasClass('pc')){
    hogehoge // PCの時
  }
  else{
    hogehoge // スマホの時
  }
});

　
cssもこんな感じで書ける

.hoge{
  color: black;
}
.pc .hoge{
  color: red;
}
.sp .hoge{
  color: blue;
}

ちなみに
window.matchMedia('(orientation: portrait)');
と書けば横長か縦長かも判定できます。（あくまで縦横比）
　
　

まとめ

メリット

• styleの振り分け、jsの条件分岐を一つの機能を使って実装可能
• resizeで判定しない分、無駄な処理がなくなる
• 追加の処理も容易に実装できる

　
デメリット

• IE9以下は対応していない
• 画面表示されてclassが付与されるまで一瞬崩れる

う～んcssに関しては素直にMedia Queriesでいいのかな？