Responsive Interactions with jQuery

Responsive Interactions with jQuery — a practical guide to jQuery responsive interactions with clear examples you can reuse in real projects.

jQuery Tutorial Series (92/101). Prefer one article? Read the complete jQuery tutorial.

Short description

Debounce resize handlers; prefer CSS when possible.

Responsive tip

function onViewport() {
  if (window.matchMedia('(max-width: 768px)').matches) {
    $('#nav').addClass('is-mobile');
  } else {
    $('#nav').removeClass('is-mobile');
  }
}
$(onViewport);
$(window).on('resize', onViewport);