Learning Less.js

Designing media queries

So far, we've seen what media queries are, the options available, and our clients who have helped us to determine what devices we need to support. It's at this stage in the process that we need to determine how we're going to translate these requirements into real code.

To help with this, let's work through a simple example. In this instance, we need to create a simple block of text, with a list of editors shown to the left of the text. Granted, it is somewhat contrived, but it does show perfectly how we can vary the content when displayed on different devices.

Creating a simple example

The best way to see how media queries work is in the form of a simple demo. In this instance, we have a simple set of requirements, in terms ...