Responsive Web Design Using CSS3 Media Queries

There are various ways for making a web page responsive, using a framework like bootstrap or materialize.css or with pure CSS. In this article, let’s see how we can use CSS3 to make responsive templates.

Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

Note: Before using media queries, don’t forget to add the following tag inside the head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

A meta viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Syntax

@media not|only mediatype and (expressions) {
    CSS-Code;
}

Examples:

For extra small devices (smaller phones, 600px and smaller)

@media only screen and (max-width: 600px) {
	body {
         background-color: red;
	 font-size: 1em;
        }
}

For small devices (portrait tablets and large phones, 600px and up)

@media only screen and (min-width: 600px) {
    body {
         background-color: yellow;
	 font-size: 1.1em;
    }
}

For medium devices (landscape tablets, 768px and up)

@media only screen and (min-width: 768px) {	
    body {
         background-color: blue;
	 font-size: 1.2em;
    }
}

For large devices (laptops/desktops, 992px and up)

@media only screen and (min-width: 992px) {
     body {
         background-color: green;
	 font-size: 1.3em;
    }
}

For extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
    body {
         background-color: violet;
	 font-size: 1.4em;
    }
}

Media queries depending on the orientation of the browser.

@media only screen and (orientation: landscape) {
        body {
             background-color: yellow;
    	 font-size: 1.2em;
        }
    }
@media only screen and (orientation: portrait) {
        body {
             background-color: green;
    	 font-size: 1em;
        }
    }

Read More at MDN