Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width | Responsive Web Design

Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width

Rather than the measuring the screen width on resize of the window, I check for a css rule that is changed by the media query. This way, regardless of the how the browser treats the scrollbar, the media query will fire at the same time.

This is a great little trick if you’re looking to use javascript to load in content or change the dom based on the changing viewport width (or height). I’ve seen it before using a different font-face, which probably allows you to be more descriptive with name.

An excerpt from Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.