In this article, we will learn about the media queries in CSS.

Media queries can change the appearance of the website on the basis of matched conditions about the browser, user’s device, or system settings.

When you want to modify your site or app based on a device’s general type (such as print vs. screen) or specific characteristics and parameters, they come in role (such as screen resolution or browser viewport width).

The following are examples of media queries:

• CSS @media and @import at-rules can be used to conditionally apply styles.
• With the media= attribute, you can target specific media for the <style>, <link>, <source>, and other HTML elements.
• To use the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods to test and monitor media states.

Syntax of Media queries

A media query is made up of one or more media feature expressions and an optional media type. Logic operators can be used to combine multiple queries in a variety of ways. They are not case-sensitive.

When the media type (if specified) matches the device on which a document is displayed, and all media feature expressions are true, a media query returns true. Unknown media types are always false in queries.

Media types

A device’s general category is described by its media type. The media type is optional when using the not or only logical operators, in which case all types will be implied.

• all: Compatible for all devices.
• print: Intended for paged material and documents viewed in print preview mode on a computer screen.
• screen: Designed primarily for use on screens.
• speech: This is a speech synthesizer.

Media Features

Specific characteristics of the user agent, output device, or environment are described by media features. Media feature expressions are completely optional and are used to test their presence or value. Parentheses must surround each media feature expression.

Name	Summary	Notes
any-hover	Does any available input mechanism allow the user to hover over elements?	Added in Media Queries Level 4.
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4.
aspect-ratio	The width-to-height aspect ratio of the viewport
color	Number of bits per color component of the output device, or zero if the device isn’t color
color-gamut	Approximate range of colors that are supported by the user agent and output device	Added in Media Queries Level 4.
color-index	Number of entries in the output device’s color lookup table, or zero if the device does not use such a table
device-aspect-ratio	The width-to-height aspect ratio of the output device	Deprecated in Media Queries Level 4.
device-height	Height of the rendering surface of the output device
device-width	Width of the rendering surface of the output device
display-mode	The display mode of the application, as specified in the web app manifest’s display member	Defined in the Web App Manifest Spec.
forced-colors	Detect whether user agent restricts color palette	Added in Media Queries Level 5.
grid	Does the device use a grid or bitmap screen?
height	Height of the viewport
hover	Does the primary input mechanism allow the user to hover over elements?	Added in Media Queries Level 4.
inverted-colors	Is the user agent or underlying OS inverting colors?	Added in Media Queries Level 5.
monochrome	Bits per pixel in the output device’s monochrome frame buffer, or zero if the device isn’t monochrome
orientation	Orientation of the viewport
overflow-block	How does the output device handle content that overflows the viewport along the block axis?	Added in Media Queries Level 4.
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled?	Added in Media Queries Level 4.
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it?
prefers-color-scheme	Detect if the user prefers a light or dark color scheme	Added in Media Queries Level 5.
prefers-contrast	Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors	Added in Media Queries Level 5.
prefers-reduced-motion	The user prefers less motion on the page	Added in Media Queries Level 5.
resolution	The pixel density of the output device
scripting	Detects whether scripting (i.e. JavaScript) is available
update	How frequently the output device can modify the appearance of content
width	Width of the viewport including the width of the scrollbar

Logical operators

A complex media query can be composed using the logical operators not, and, and only. You can also use commas to separate multiple media queries and combine them into a single rule.

and

The and operator is used to merge multiple media features into a single media query. For the query to be true, each chained feature must return true. It’s also used to connect media types with media features.

not

The not operator is used to invalidate a media query, it will return true if the query will otherwise return false. It will only negate the specific query if it is applied on list of queries which is separated by comma. You must also specify a media type if you use the not operator.

only

The only operator applies a style only if the entire query matches, which is useful for preventing selected styles from being applied by older browsers. When not using only, older browsers interpreted the query screen and (max-width: 500px) as screen, ignoring the rest of the query and applying the query’s styles to all screens. You must also specify a media type if you use the only operator.

, (comma)

Multiple media queries are combined into a single rule using commas. A comma-separated list of queries is treated independently of the others. As a result, if any of the queries in the list is true, the entire media statement is true. To put it another way, lists act like logic or operators.

That’s all about the Media Queries in CSS.

You may also like: Flexbox in CSS | Web Development

Hope this article will guide you to recognize all about the Media Queries in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.