【jQuery】メディアクエリーの幅に応じてjQueryも切り替える

レスポンシブでサイトを作ると、
PCとスマートフォン（SP）でjQueryの設定も横幅に合わせて切り替えたい場合が多々発生します。

カードデザインなど、カードを縦横並べるようなデザインだと
PCとSPで並べる数が変わってきます。
jquery.tile.jsなどを使ってカードの枠自体の高さを揃えたり、カード内の見出しやコンテンツの高さを揃えたりしますが、横並びの数が変わると変な隙間が出来てしまったり、少し不格好なデザインになりがちです。

jquery.tile.js自体の設定でもブレイクポイントを設定することは出来ますが、もっと汎用的に使えるように…

if (window.matchMedia("(max-width: 768px)").matches) {
// windowのサイズが768px以下
}else{
// windowのサイズが768px以上
}

このコードを使うと、例えば以下のような記述になります。
SPのboxは一列、PCのboxは二列となる場合…

if (window.matchMedia("(max-width: 768px)").matches) {
// windowのサイズが768px以下
$(function() {
    $('.box').tile(1);
    $('.card').tile();
});
}else{
// windowのサイズが768px以上
$(function() {
    $('.box').tile(2);
    $('.card').tile();
});
}

PC・SP共通で使うJSはこのコードの外に記述して、
PCとSPで設定を変えたい場合やPCのみ・SPのみの場合、それぞれ記述するだけで簡単に使えます。

参考：
https://appdev-room.com/js-q-responsive
https://frontend.seeknext.co.jp/responsive-js/