Advertisement

Advertisement


CSS3 Media Queries

Media queries are very helpful if you want to customize your website for different devices like mobile phones, tablets, desktops, etc. without any change in markups. Different CSS properties are specified for different screen sizes and at a time only that CSS will work which is defined for the current screen size. For example, In a mobile device, CSS stylesheet rules written under the mobile device media query, will be implemented and hence the website will be customized that way.

Media queries are logical expressions which can result into either true or false. If the given query happens to be true then the code(related stylesheet) inside the query block will get executed otherwise not. It is same like the condition check in if statement. Try to understand how to use the media queries in the webpage from the examples below, they are very important if you want to make a website compatible with all the devices of different screen sizes.

Recommended Media Features

Given below are some features on which you can apply media queries. These features will get checked according to the media query and if they evaluates to true then changes will happen. In the table below, the Min/Max column will tell you whether the Min/Max attributes can be used with that feature inside the media query or not, like min-height, max-resolution, etc.

Feature Value Min/Max Description
device-aspect-ratio integer yes It gives the condition for the aspect ratio of the device.
device-height pixels yes It gives the condition for a particular height of the output device.
device-width pixels yes It gives the condition for a particular width of the output device.
grid integer no It is used for a grid-based device.
height pixels yes It gives the condition for a particular height of the rendering surface.
resolution DPI/DPCM yes It gives the condition for resolution of the display screen.
width pixels yes It gives the condition for width of the rendering surface.

Media Queries Example

One of the basic way to implement media queries in the webpage is to write them inside the CSS stylesheet in an alternate section.

The following example changes the background-color to blueviolet if the viewport is 550 pixels wide or wider (if the viewport is less than 550 pixels, the background-color will be lightgreen.)


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Media Queries </title>
<meta charset="UTF-8">
<style>
body {
background-color: lightgreen;
}
@media screen and (min-width: 550px) {
body {
background-color: blueviolet;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 550px wide or wider.</p>
</body>
</html>

Output

CSS 3 Media Queries

Resize the browser window to see the effect!

The media query will only apply if the media type is screen and the viewport is 550px wide or wider.

CSS 3 Media Queries

Resize the browser window to see the effect!

The media query will only apply if the media type is screen and the viewport is 550px wide or wider.


The following example shows a menu that will float to the left of the page if the viewport is 550 pixels wide or wider (if the viewport is less than 550 pixels, the menu will be on top of the content).


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Media Queries </title>
<meta charset="UTF-8">
<style>
.wrapper {overflow: auto;}
#sidebar {
float: none;
width: auto;
}
#menuitem {
margin: 0;
padding: 0;
text-align:center;
}
.menu {
background: lightgray;
border: 1px solid blueviolet;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 550px) {
#sidebar {width: 200px; float: left;}
#main {margin-left: 216px; margin-top: -25px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="sidebar">
<ul id="menuitem">
<li class="menu">Menu 1</li>
<li class="menu">Menu 2</li>
<li class="menu">Menu 3</li>
<li class="menu">Menu 4</li>
<li class="menu">Menu 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
</div>
</div>
</body>
</html>

Output

CSS 3 Media Queries

Resize the browser window to see the effect!

This example shows a menu that will float to the left of the page if the viewport is 550 pixels wide or wider. If the viewport is less than 550 pixels, the menu will be on top of the content.










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.