What does it support, exactly?
- width / height / aspect-ratio / orientation / font-size
- device-width / device-height / device-aspect-ratio / device-orientation
- values written with em, in, pt, px, %, and empty suffixes.
- min-property, max-property, property <, property >
How to use it
First, add the MediaQuery script to your site or page.
Evaluate a query on the fly.
var result = MediaQuery('min-width: 640px').matches; // returns a boolean: true or false if whether the media query was matching
Save a media query object to be evaluated anytime later.
var mq = MediaQuery('min-width: 640px'); // many moments later mq.matches;
Read or replace a media query with the
MediaQuery('min-width: 640px').query('width > 640px').query; // returns a string: "width > 640px"
Add an event with
addEvent, which will run each time the media query changes to or from matching.
Add a classname to <html> with
addClass, which will only be added when the media query is matching.
MediaQuery('width < 768').addClass('handheld');
- Google Chrome
- Mozilla Firefox 3+
- Apple Safari 4+
- Opera 10+
- Internet Explorer 6+
MediaQuery is a project by Jonathan Neal.