Create responsive design using media queries

Media Queries

In last decade, we have seen so many devises of different shapes and sizes coming into the market. It has become more and more difficult to design a website that fits well in all these screens. But now there is a relief for developers, you can create a responsive design using the media queries. It allows you to display the same content in different layouts by using different style sheets depending on the output device.

HTML4 and CSS2 supports media dependent style sheets for different media types. For example, a document may use font height = 20px when it is displayed on the screen and height = 10px when it is printed. There are two available media types: ‘screen’ and ‘print’. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types.

<link rel="stylesheet" type="text/css" media="screen" href="font20px.css">

<link rel="stylesheet" type="text/css" media="print" href="font10px.css">

Media queries extend the functionality of media types by letting more precise labelling of style sheets. A Media query is a CSS3 extension to media types that allows you far greater control over rendering across different devices. A media query consists of a media type and zero or more expressions that tests one or more features of a output device to which the CSS is to be applied. The media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. The CSS associated with the media query expression is only applied if the expression evaluates to true. You can use media queries in:

• <link> tag (HTML and XHTML)
• XML processing instructions
• @import at-rule
• @media at-rule

Here is a simple example written in HTML:

<link rel="stylesheet" media="screen and (color)" href="example.css" />

In the above example, a certain style sheet example.css applies to devices of a certain media type (‘screen’) and certain feature (color screen).

Here’s another example, which applies the CSS if the output device is a handheld device with a width between 20 and 200 pixels:

@import url(/style.css) screen and (min-width:800px) and (max-width:1280px);

You can combine several media queries by separating them by a comma. If one or more queries in this comma separated list are true then the complete query is true. Here is an example of several media queries in a comma-separated list:

@media <em>screen and (color), projection and (color)</em> { … }

Below you can find some more information about media queries:

• the comma expresses a logical OR
• the ‘and’ keyword expresses a logical AND
• the ‘not’ keyword expresses a logical NOT, The not operator has a very low precedence.

Here is the same example written in HTML, XHTML, XML, @import and @media:

<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">

<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />

<?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }

Media features:

Media features resemble CSS properties. They have a name and accept certain values. Most media features accept optional ‘min-’ or ‘max-’ prefixes to express “greater or equal to” and “smaller or equal to” constraints. For example, the ‘color’ media feature can form expressions without a value (‘(color)’), or with a value (‘(min-color: 1)’).