In the age of using mobile devices and responsive design, a key element in building sites is to allow their use on mobile devices, such as iPads or smartphones.
The key to responsive design is the @media rule—we can use this to define the style at particular breakpoints or sizes of screen estate for different devices. To illustrate how this works when using Less, we'll use a simplified example created by Eric Rasch as a basis for an example web page:
Note
Eric's original example is available at http://codepen.io/ericrasch/HzoEx.
For this demonstration, we'll break the convention and use the copies of the media.html and media.less files that are available in the code download that accompanies this book. I recommend that you run the demo in a browser that has a DOM inspector installed, so you can see the different styles in use as we resize the browser.
The media.html file contains some simple text generated using the Lorem Ipsum generator at http://www.lipsum.com; this...