CSS Media Queries

by

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.