window.matchMedia the js equivalent of media queries

Obara, Justin jobara at ocadu.ca
Fri Jun 29 11:59:54 UTC 2012


CSS media queries have been getting a lot of attention lately. We even have a responsive design for our stuidos.fluidporject.org site in the works, thanks to Johnny. But what about on the javascript side. In the past we could do checks on the window size and etc, but these solutions weren't quite as elegant as media queries are for CSS.

window.matchMedia brings the power of CSS media queries to javascript, and best of all it supports events. It's actually been around for a while and has fairly decent support amongst modern browsers. IE should be picking it up in version 10. 

Here are a few links with more info.
http://www.sitepoint.com/javascript-media-queries/#.T-2U2Y59mg8
http://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/
http://caniuse.com/#feat=matchmedia

Thanks
Justin


More information about the fluid-work mailing list