Media queries is used to make web page responsive i.e. for mobile phones, tablet. It is based on the capability of the device instead of checking only the device width and height.

It can check the following points:

• Viewport width and height
• Device width and height
• orientation :landscape or portrait mode in the phones or tablets

Resolution

It can give style to all Android, iphones and tablets.

Syntax:

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

CSS3 Media Types:

• screen for window screens or mobile-phones or tablets.
• all for all media type devices
• print for printers

Example:

@media screen and (min-width: 768px) {
    body {
        background-color: red;
    }
}

This will change the color of the background of the page to red if the viewport width is 480px or above.