js側でPCとスマホ、タブレットの表示分ける

スマホ、タブレットで表示を変えるときにCSSで@media指定して制御するのはよくやるけど、要素の順番とか配置等ガッツリ見た目に変更足したい時があった。

CSSだとスマホの時に要素の並び替え変えるのはflex指定すればできたりするけどどうも綺麗にいかなかったのでJSで振り分けてみた。

CSSでよくやるやつ

@media screen and (mix-width: 768px) {
    // スマホ、タブレットのstyle指定
}

JS（Reactのrender内）

  if (window.matchMedia && window.matchMedia('(max-device-width: 768px)').matches) {
    // スマホ、タブレット表示
    return ()
  } else {
    // PC表示
    return ()
}