The best way to use Media Queries in JavaScript with matchMedia

When it was first launched, responsive design was one of the thrilling net format ideas since CSS changed tables. The underlying expertise makes use of media queries to find out the viewing system kind, width, peak, orientation, decision, facet ratio, and coloration depth to serve totally different stylesheets.

For those who thought responsive design was reserved for CSS layouts solely, you will be happy to listen to media queries will also be utilized in JavaScript, as this text will clarify.

Within the following instance, cssbasic.css is served to all units. However, if it is a display with a horizontal width of 500 pixels or larger, csswide.css can also be despatched:

The probabilities are infinite and the method has lengthy been exploited by most web sites on the market on the Web. Resizing the width of your browser triggers modifications within the format of the webpage.

With media queries these days it is easy to adapt the design or resize parts in CSS. However what if it's worthwhile to change the content material or performance? For instance, on smaller screens you would possibly wish to use a shorter headline, fewer JavaScript libraries, or modify the actions of a widget.

It is doable to investigate the viewport dimension in JavaScript but it surely's a bit of messy:

Most browsers help window.innerWidth and window.innerHeight. (IE earlier than model 10 in quirks mode required doc.physique.clientWidth and doc.physique.clientHeight.)
window.onresize
All the primary browsers help doc.documentElement.clientWidth and doc.documentElement.clientHeight but it surely's inconsistent. Both the window or doc dimensions can be returned relying on the browser and mode.

Even in the event you efficiently detect viewport dimension modifications, you will need to calculate elements resembling orientation and facet ratios your self. There is no assure it's going to match your browser's assumptions when it applies media question guidelines in CSS.

The put up The best way to use Media Queries in JavaScript with matchMedia appeared first on SitePoint.

Source link