Book Image

Responsive Design High Performance

By : Dewald C Els, Dewald Els
Book Image

Responsive Design High Performance

By: Dewald C Els, Dewald Els

Overview of this book

Table of Contents (16 chapters)
Responsive Design High Performance
About the Author
About the Reviewers
Speeding Up Development with Design Concepts, Patterns, and Programs

Specifying sizes and media queries and introducing sprite sheets

Media queries allow us to create wonderful skeletons for our websites. If you build responsive websites, there is no doubt that you must come into contact with media queries. Here, we will cover some basics very quickly.

When you make use of media queries, always remember to include the viewport <meta> tag, which looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

The following content is taken from Mozilla Developers Network docs:

"If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">"

If you haven't already read it, I suggest that you read through the article at: