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...