Media query in css3

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

Syntax for the media query :
@media not|only mediatype and (expressions) {
CSS-Code;
}

Note : mediatype is optional and be default it is applied for all

Example

Hello to all

Media query for the laptop screens :

Media Queries for laptops are quite difficult. Therefore instead of targeting specific devices, try specifying a general screen size range, then applying it for retina and non-retina screens.

/* ———– Non-Retina Screens ———– */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}

/* ———– Retina Screens ———– */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}

By Pankaj Kumar Agarwal

Leave a reply:

Site Footer