JavaScriptを用いて「画面幅が600px以下の時にリロードせず、特定の処理をしたい」みたいな時に便利なtipsです。

addEventListnerのresizeを使う

window.addEventListner("resize", function() {
　// 画面幅が600px以下の場合
  if(window.innerWidth <= 600) {
    // 特定の処理を書く
  };
　// 画面幅が600px以上の場合
  if(window.innerWidth >= 1200) {
    // 特定の処理を書く
  };
});

addEventListnerメソッドのresizeイベントは画面幅の変更を常に監視します。

そして、window.innerWidthで画面幅の数値を取得しつつ指定の画面幅以下or以上のifを描くことで、

レスポンシブなサイトにて画面幅に合った処理などを発動させることができます。

この書き方をすることでブラウザのリロードをせずに関数を発動させることができるため、

ユーザー体験においても良い効果を生み出します。

参考URL

Window: resize イベント | Mozilla web docs

関連記事:

オブジェクトとオブジェクトをマージしてコピーする方法 配列から要素をコピーする方法（slice、splice） JavaScript/TypeScriptで今日の日付を取得したいのになんかズレてるときの解決法 【解決】Safariで起こる「The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.」の解決方法