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:
// fourth screen
// 540px
On increasing the zoom:
// fifth screen
// 320px
Last screen (but not least):
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.