A declarative responsive web design syntax. Breakpoints, defined in <meta>
With metaquery, you define your media query breakpoints once, and only once.
— by @benschwarz
Install via Bower bower install metaquery
Otherwise, if you want to grab it manually:
Download the production version (691 bytes) or the development version.
The smaller (480 bytes!), lighter jQuery powered edition:
- Define your breakpoints in
<meta>tags.
<meta name="breakpoint" content="phone" media="(max-width: 480px)">
<meta name="breakpoint" content="small-tablet" media="(min-width: 480px) and (max-width: 600px)">
<meta name="breakpoint" content="tablet" media="(min-width: 600px) and (max-width: 1024px)">
<meta name="breakpoint" content="widescreen" media="(min-width: 1024px)">
<meta name="breakpoint" content="retina" media="only screen and (-webkit-min-device-pixel-ratio : 2)">- metaQuery will add/remove classes to the
<html>node (.breakpoint-<name-of-breakpoint>) for you to utilise when the breakpoints are matched. (shorter than media queries. don't repeat yourself)
<style>
.breakpoint-phone { background: red; }
.breakpoint-small-tablet { background: green; }
.breakpoint-tablet { background: blue; }
.breakpoint-widescreen { background: yellow; }
</style>- Responsive images in one simple line.
<img src="./images/phone.jpg" data-mq-src="./images/[breakpoint].jpg">- Add modernizr to detect support for matchMedia, then use either the official matchMedia.js polyfill, or my version that'll also work for IE7 & 8
Modernizr.load([{
test: ( !!window.matchMedia ),
nope: ['./js/vendor/matchMedia-oldie.js']
}]);Considering the HTML example above, say you wanted watch for breakpoint changes:
metaQuery.bind( 'phone', function ( match ) {
if( match ) { // phawor! your media query matches. }
});metaQuery requires matchMedia:
- Use the polyfill (matchMedia.js)
- If you wish to support IE 7 & 8, use my variant (matchMedia-oldie.js)
Otherwise, metaQuery will work with all common desktop and mobile browsers.
I recently worked on a large HTML magazine that is edited by an editorial team. Each 'module' of a template is responsive, and requires unique styles and sometimes even scripts. After reflecting on the project for some time, what worked and what didn't, I made some simple observations:
- Writing media queries over and over again sucks. (Even though I use the technique that I illustrated back in December 11')
- If you want media query access in javascript, you'll create yet another media query with
matchMedia - picturefill is the best responsive image technique I've seen… until I authored templates for a massive magazine. The syntax is too long and easy to forget.
- and finally, a summary of all three: a declarative interface is far nicer to use.
After reading both Jeremy Keith and Matt Wilcox's articles, then the source of picturefill I decided to get my hands dirty and have a go at a slightly better approach.
Internally, metaQuery uses a resize event handler, you may be thinking, "but wait — not all media queries are related to device width", While this is true. metaQuery will still execute onLoad, and when additional events are bound. For me, this is enough, disagree? Please add an issue.
Please use idiomatic.js as a styleguide and take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Reviewers: Tim Lucas, Ben Alman, Jeremy Keith, Paul Irish, Divya Manian, David Desandro, Nicolas Gallagher and Mat Marquis
Code:
- Scott Jehl for writing picturefill, matchMedia.js (with Paul Irish) and respond.js. Legend.
- Dustin Diaz's teeny dom ready.
Copyright (c) 2012 Ben Schwarz
Licensed under the MIT license.