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