If you've ever spent time creating content for sites, particularly for display on a mobile platform, then you might have come across media queries.

For those of you who are new to the concept, media queries are a means of tailoring the content that is displayed on screen when the viewport is resized to a smaller size. Historically, websites were always built at a static size—with more and more people viewing content on smartphones and tablets, this means viewing them became harder, as scrolling around a page can be a tiresome process!

Thankfully, this became less of an issue with the advent of media queries—they help us with what should or should not be displayed when viewing content on a particular device. Throughout this chapter, we'll take a brief look at what they are, how they work, and focus more on how you can use Less to create them.

Almost all modern browsers offer native support for media queries—the only exception being IE Version 8 or below, where it is...