One of those small pet hates when working with media queries is that the query itself isn't really semantic; most queries will show something like max-width: 1024px, when we really mean …less than… or …greater than….

Thankfully, with the upcoming changes to CSS in what most people call CSS4, we will be able to use >, <, or = symbols to express what we really mean in our code. The beauty about PostCSS is that we can emulate that functionality now, with the postcss-media-minmax plugin (available at https://github.com/postcss/postcss-media-minmax); the plugin will convert these to the more familiar min- or max- statements that we already know.

It's a really easy plugin to use—we're going to break with convention here though, and use CodePen to demonstrate the plugin in action. CodePen will support a limited number of plugins, of which this is one of them—it's a perfect opportunity to see the effect of our query in action. For our demo, we're going to use...