<h1>Need Updates about Screen Width?</h1>
<p>I am wider than 599px now.</p>
body {
  text-align: center;
  margin: 50px;
  font-family: 'Lato';
}

h1 {
  font-size: 2rem;
  text-transform: uppercase;
  color: green;
  font-weight: 900;
}

p {
  font-size: 1.5rem;
}

@media (min-width: 600px) {
  h1 {
    font-size: 4rem;
  }
}
function widthChangeCallback() {
  if(window.innerWidth > 599) {
    document.querySelector("p").textContent = "I am wider than 599px now.";
   } else {
     document.querySelector("p").textContent = "I am narrower than 599px now.";
   }
}

window.addEventListener('resize', widthChangeCallback);
widthChangeCallback();

External CSS

  1. https://fonts.googleapis.com/css2?family=Lato:wght@400;900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.