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:
For becoming familiar with design issues, please go through this article:
Design Issues vs CSS3
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 sets 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 for 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
  1. body {  
  2.     background-color: grey;  
  3. }  
  5. @media screen and (max-width920px) {  
  6.     body {  
  7.         background-colorred;  
  8.     }  
  9. }  
  11. @media screen and (max-width720px) {  
  12.     body {  
  13.         background-color: orange;  
  14.     }  
  15. }  
  17. @media screen and (max-width540px) {  
  18.     body {  
  19.         background-color: yellow;  
  20.     }  
  21. }  
  23. @media screen and (max-width320px) {  
  24.     body {  
  25.         background-colorgreen;  
  26.     }  
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 the 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 too far, because it will create nonsense in your design.