PostCSS plugin converts min/max-width media queries to classes, useful for clients that do not support media queries e.g. IE8.
/* Input example */
@media (min-width: 768px) and (max-width: 991px) {
.foo {
float: left;
}
}/* Output example */
.min-width-768px.max-width-991px .foo {
float: left;
}postcss([ require('postcss-mqwidth-to-class') ])See PostCSS docs for examples for your environment.
- Only supports
pxunits. - Ignores anything else in the query, e.g. screen, print, orientation.
- You'd need JavaScript to add the classes to the
<html>or<body>tags. E.g. mqwidth-to-class.js. - For IE8, off the bat you can have the
<html>tag via conditional comments.
I used the PostCSS Boilerplate and these two projects as a base: