Media Query

Introduction

Media queries in CSS are a powerful tool that allows us to apply different styles to a web page based on the characteristics of the device or viewport it is being viewed on. By using media queries, we can create responsive and adaptive web designs that look great on all devices, from desktops and laptops to tablets and smartphones.

Syntax

A media query consists of a media type and one or more expressions that define the conditions under which the styles defined within the media query will be applied. The syntax for a media query is as follows:

@media media-type and (expression) {
    /* styles to be applied if the media query matches */
}

The media-type specifies the type of device or media being targeted by the media query, such as screen, print, speech, or all. The expression is a series of one or more media features, such as min-width, max-width, orientation, or resolution, that define the conditions under which the styles within the media query will be applied.

Media Features used in media queries

-min-width and max-width - These features are used to define the minimum and maximum width of the viewport, respectively. For example, the following media query would apply styles only if the viewport width is between 600 and 900 pixels:

@media screen and (min-width: 600px) and (max-width: 900px) {
    /* styles to be applied if the media query matches */
}

-orientation - This feature is used to define the orientation of the device, either portrait or landscape. For example, the following media query would apply styles only if the device is in landscape orientation:

@media screen and (orientation: landscape) {
    /* styles to be applied if the media query matches */
}

-resolution - This feature is used to define the resolution of the device, in dots per inch (DPI) or dots per centimeter (DPC). For example, the following media query would apply styles only if the device has a high resolution display:

@media screen and (min-resolution: 300dpi) {
    /* styles to be applied if the media query matches */
}

Media queries can also be combined using logical operators like and, not, and only to create more complex queries.

-Combining min-width and max-width:

@media screen and (min-width: 600px) and (max-width: 900px) {
    /* styles to be applied if the viewport width is between 600 and 900 pixels */
}

-Using not to apply styles only if the media query does not match::

@media not screen {
    /* styles to be applied if the media query does not match a screen device */
}

-Using only to apply styles only if the media query matches and the device supports CSS3 media queries:

@media only screen and (min-width: 600px) {
    /* styles to be applied if the viewport width is at least 600 pixels and the device supports CSS3 media queries */
}

Conclusion

One of the key benefits of using media queries is that they allow us to create responsive web designs that adapt to the device they are being viewed on. For example, we can use media queries to apply different styles to a navigation menu or to change the layout of a web page based on the width of the viewport.