Responsive Web Design Using Media Queries

This article is the second in the series of responsive web designs using CSS3. This article will provide a glimpse at how things actually work using media queries and how useful it can be for designing web sites.

For the basic details of media queries in CSS3 please go through this article:

Media Queries in CSS

For becoming familiar with design issues, please go through this article:

Design Issues vs CSS3

Description

In this article I'll explain the coding of the look and features that can be changed depending on the display size using media queries.

How it Works

You only need to merge a few set of coding lines of media queries using CSS3 and you will see the magic of media queries. You will also better understand the meaning and the sense of responsive web design and why it is so necessary in the current development and design scenarios of websites and web applications.

What we need to do …?

We only need to create an external CSS file and call it in our simple HTML page, that's all. It will work depending on that.

Call external CSS file in HTML page using:

<link rel="stylesheet" type="text/css" href="multipleback.css"/>

external CSS file
Coding

CSS CODE

body

{

background-color: grey;

}

@media screen and (max-width: 920px)

{

body

{

background-color: red;

}

}

@media screen and (max-width: 720px)

{

body

{

background-color: orange;

}

}

@media screen and (max-width: 540px)

{

body

{

background-color: yellow;

}

}

@media screen and (max-width: 320px)

{

body

{

background-color: green;

}

}

CSS CODE

Output Screens

// default screen

After running the simple HTML page by default you will get this output screen in the display.

HTML page

// second screen
// 920px

The screen after increasing or zooming the display:

screen after increasing or zooming display

// third screen
// 720px

Increasing display zoom:

Increasing display zoom 

// fourth screen
// 540px

On increasing the zoom:
 
increasing zoom 

// fifth screen
// 320px

Last screen (but not least):
 
last screen 

You can extend the resolution screen and display screen colors depending on you to any limit but don't go to far, because it will create nonsense in your design.