To create a responsive web page that can adapt to conditions such as varied screen resolution, the CSS Media Query module was recommended by the W3C. It was first introduced in CSS3 and became a W3C recommendation in June 2012. The media-dependent stylesheets that were used in different media types (i.e. screen and print) found in CSS2, were extended to create CSS3 Media Query. The “width” is the most commonly used media feature. To include a block of CSS properties only if a certain condition is true, the CSS Media Query uses the @media rule.
Media features recommended for Media Queries by W3C:
| Feature | Value | Min/Max | Uses |
| color | integer | yes | Used to define the number of bits per color component. |
| color-index | integer | yes | Used to define the number of entries in the color lookup table. |
| device-aspect-ratio | integer/integer | yes | Used to define the aspect ratio of the device. |
| device-height | length | yes | Used to define the height of the output device. |
| device-width | length | yes | Used to define the width of the output device. |
| grid | integer | no | Used to define a true value for a grid-based device. |
| height | length | yes | Used to define the height of the rendering surface. |
| monochrome | integer | yes | Used to define the number of bits per pixel in a monochrome frame buffer. |
| resolution | resolution (“dpi” or “dpcm”) | yes | Used to define the resolution of the display screen. |
| scan | “progressive” or “interlaced” | no | Used to define the scanning process of “tv” media types. |
| width | length | yes | Used to define the width of the rendering surface. |
Responsive Web Design:
Ethan Marcotte first introduced the term Responsive Web Design. Responsive web design uses fluid grids, flexible images, and media queries to progressively intensify a web page for different display settings.
The different screen resolutions used while taking screenshots:
Smartphone: 320px
Tablet: 768px
Netbook: 1024px
Desktop: 1600px
Example1:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
@media screen and (min-width: 500px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
<h1>Hello World!!</h1>
<p>Today is a Great day.</p>
</body>
</html>
Explanation:
In the above example, we are displaying the simple use of media queries. Here, the background color changes, when the window is resized more than 500px.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 5px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: crimson;
color: white;
border: 2px solid black;
border-radius: 5px;
list-style-type: none;
margin: 5px;
padding: 8px;
}
@media screen and (min-width: 500px) {
#leftsidebar {width: 300px; float: left;}
#main {margin-left: 250px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Item 1</li>
<li class="menuitem">Item 2</li>
<li class="menuitem">Item 3</li>
<li class="menuitem">Item 4</li>
<li class="menuitem">Item 5</li>
</ul>
</div>
<div id="main">
<h1>hELLO wORLD!!</h1>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we are using a media query to move the menu on top of the content when the viewport is less than 500 pixels.
