home

mediaQuery

Plug-in for jQuery that adds a class to each selected element equal to the key of any matching media query. Also acts as a polyfill for media queries, matchMedia and addEventListener javascript functions.

Syntax:

selector.mediaQuery(object[, callback(mq, key)])

object contains key/value pairs corresponding to a valid HTML5 class and matching media query. callback is a function that returns the active listener and the key used to create the object.

Usage:

$(document).ready(function(){
	
	$('body').mediaQuery({
		w320: 'only screen and (min-width: 320px)',
		w480: 'only screen and (min-width: 480px) ',
		w768: 'only screen and (min-width: 768px)',
		w1024: 'only screen and (min-width: 1024px)'
	});
})

Example:

http://jameswestgate.github.com/mediaQuery/examples/