A declarative responsive web design syntax. Breakpoints, defined in `<meta>`
A declarative responsive web design syntax. Breakpoints, defined in <meta>
With metaquery, you define your media query breakpoints once, and only once.
(Demo)
— by @benschwarz
Install via Bower bower install metaquery
Otherwise, if you want to grab it manually:
Download the production version (416 bytes) or the development version.
<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)">
<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>
<img src="./images/phone.jpg" data-mq-src="./images/[breakpoint].jpg">
Modernizr.load([{
test: ( !!window.matchMedia ),
nope: ['./js/vendor/matchMedia-oldie.js']
}]);
Considering the HTML example above, say you wanted watch for 'phone' breakpoint changes:
metaQuery.onBreakpointChange( 'phone', function ( match ) {
if( match ) { // phawor! your media query matches. }
});
and if you just want to fire an event whenever you switch breakpoints (but don't care which)
metaQuery.onBreakpointChange( function (activeBreakpoints) {
// do something amazing because you've changed breakpoints!
// your callback will also be passed an array containing the names of active breakpoints.
});
metaQuery requires matchMedia:
Otherwise, metaQuery will work with all common desktop and mobile browsers.
metaQuery can be used with browserify.
In 2011/12 I 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:
matchMediaAfter 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.
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:
Copyright (c) 2012 Ben Schwarz Licensed under the MIT license.
FAQs
A declarative responsive web design syntax. Breakpoints, defined in `<meta>`
We found that metaquery demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.