Using matchMedia to add the Responsible to Responsive Web Design
Last Updated -
Responsive design is a technical art that requires more than just a few CSS media queries. The matchMedia method allows you to dynamically adjust the DOM using JavaScript without binding to a resize event.
The window.matchMedia method allows you to define JavaScript media queries by binding an event handler when the breakpoint is triggered.
var mql = window.matchMedia("screen and (min-width: 400px)") The matchMedia method accepts a string. The string is a CSS media query breakpoint. In this example the breakpoint applies to when the screen is at least 400 pixels wide.
This works whether the user is resizing a desktop browser or rotating a mobile screen.
Responsive Web Design (RWD) because it provides an affordable way to have a single code base that targets a broad range of client devices.
The power and ease of RWD is in the use of CSS media queries defining custom rules adjusting the layout.
Efforts to deal with the content management side of responsive web design have led to a term some are calling responsible web design.
My understanding of the practice is a mixture of CSS media queries and JavaScript to create a more optimal DOM and rendering based on the browser criteria (typical size).
You can use the browser ViewPort's height and width to trigger different work flows and rendering rules.
Most web developers efforts are likely to bind an event handler to the Window's resize event.
I was no different.
This leads to performance issues because the resize event continually fires as the user resizes the window.
matchMedia solves the performance issue because it only triggers when the media query's condition is triggered. This happens when the ViewPort either matches or does not match the condition.
The matchMedia handler will only trigger once, each time the ViewPort condition changes in regard to the media query breakpoint.
The matchMedia method returns a new MediaQueryList object. This object has a pair of members; addListener and removeListener.
These two methods bind and unbind a callback method that gets executed when the browser's ViewPort crosses a boundary set by a media query.
The media query (often abbreviated as mql in documentation) is the same syntax used in CSS.
The following example script creates a MediaQueryList that executes a callback when the browser ViewPort crosses 400 pixels width, either greater than or less than.
window.matchMedia("(min-width: 400px)").addListener(function (e) { if(e.matches) { console.info("the view port is at least 400 pixels wide"); }else{ console.info("the view port is not at least 400 pixels wide"); } }); The addListener callback accepts a single variable, I used 'e' in the example.
The variable has a pair of properties; matches and media.
The matches property is a boolean and is either true or false, indicating if the media query criteria have been met.
For the example above when the width is less than 400 pixels it is false. When the ViewPort is 400 pixels or greater it is true.
The media property is a list of the media queries used to create the MediaQueryListener. In this example it returns "(min-width: 400px)".
There are two primary advantages matchMedia has over monitoring the resize event.
- It only fires when the media query criteria matches property changes, not every single resize event.
- It allows your JavaScript to utilize that same media queries and syntax you are using in your CSS.
This should make it much easier to keep content changes in sync with the CSS rules used to style the content.
matchMedia and the MediaQueryList object are supported in all current browsers.
Summary
matchMedia is not a very well known browser platform feature. It can provide dramatic performance improvements if your code is using the window resize event to trigger responsive actions and layout changes.