Book Image

Learning less.js

Book Image

Learning less.js

Overview of this book

Table of Contents (22 chapters)
Learning Less.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 of what should be displayed at each size:

  • We need to cater for four different sizes of content

  • The small version must be shown to the authors as plain text e-mail links, with no decoration

  • For medium-sized screens, we will add an icon before the link...