HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.resize(eventData, handler)</title>
  <style>
    body { font-family: sans-serif; padding: 16px; margin: 0; transition: background 0.2s; }
    body.is-narrow { background: #fef3c7; }
    body.is-wide { background: #ecfdf5; }
    #status { font-weight: 700; font-size: 18px; }
  </style>
</head>
<body>
  <div id="status">Resize to toggle layout…</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    function apply(bp) {
      var w = $(window).width();
      $("body").toggleClass("is-narrow", w < bp).toggleClass("is-wide", w >= bp);
      $("#status").text(w < bp ? "Narrow (< " + bp + "px)" : "Wide (≥ " + bp + "px)");
    }
    $(window).resize({ breakpoint: 480 }, function(e) {
      apply(e.data.breakpoint);
    });
    apply(480);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .resize(eventData, handler) — breakpoint (Try It)