HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>breakpoint resize</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; margin-bottom: 8px; }
    #detail { color: #475569; font-size: 14px; }
  </style>
</head>
<body>
  <div id="status">Checking width…</div>
  <div id="detail">Breakpoint: 480px — resize to see class toggle.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    function applyBreakpoint(breakpoint) {
      var w = $(window).width();
      $("body").toggleClass("is-narrow", w < breakpoint).toggleClass("is-wide", w >= breakpoint);
      $("#status").text(w < breakpoint ? "Narrow layout (< " + breakpoint + "px)" : "Wide layout (≥ " + breakpoint + "px)");
    }
    $(window).on("resize", { breakpoint: 480 }, function(event) {
      applyBreakpoint(event.data.breakpoint);
    });
    applyBreakpoint(480);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery resize event — responsive breakpoint (Try It)