Working with @media in Less
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:
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