Media Queries

CSS Media Queries
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.
CSS media queries are essential for creating responsive web pages.
The CSS @media rule is used to add media queries to your style sheet.

Media Query Syntax
A media query consists of an optional media-type and one or more media-features, which resolve to either true or false.

@media [not] media-type and (media-feature: value) and (media-feature: value) {
  /* CSS rules to apply */
}

The media-type is optional. However, if you use not, you must also specify a media-type.

The result of a media query is true if the specified media-type matches the type of device, and all media-features are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules.

Meaning of the not and and keywords:

not: This optional keyword inverts the meaning of the entire media query.

and: This keyword combines a media-type and one or more media-features.

CSS Media Types
The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all".

all - Used for all media type devices
print - Used for print preview mode
screen - Used for computer screens, tablets, and smart-phones

CSS Media Features
The media feature specifies a specific characteristic of the device.

Here are some commonly used media features:

max-height - Maximum height of the viewport
min-height - Minimum height of the viewport
height - Height of the viewport (including scrollbar)
max-width - Maximum width of the viewport
min-width - Minimum width of the viewport
width - Width of the viewport (including scrollbar)
orientation - Orientation of the viewport

resolution - Screen resolution
prefers-color-scheme - User's preferred color scheme

Using media queries

Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.

Media queries are used for the following:
To conditionally apply styles with the CSS @media, @custom-media and @import at-rules.
To target specific media for the <style>, <link>, <source>, and other HTML elements with the media=orsizes=" attributes.
To test and monitor media states using theWindow.matchMedia()and EventTarget.addEventListener() methods.

Syntax

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.
Media types define the broad category of device for which the media query applies: all, print, screen.
The type is optional (assumed to be all) except when using the only logical operator.
Media features describe a specific characteristic of the user agent, output device, or environment:
any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
device-aspect-ratio
device-height
device-posture
device-width
display-mode
dynamic-range
forced-colors
grid
height
hover
inverted-colors
monochrome
orientation
overflow-block
overflow-inline
pointer
prefers-color-scheme
prefers-contrast
prefers-reduced-motion
prefers-reduced-transparency
resolution
scripting
update
video-dynamic-range
width
For example, the hover feature allows a query to check whether the device supports hovering over elements. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.
Logical operators can be used to compose a complex media query: not, and, and only. You can also combine multiple media queries into a single rule by separating them with commas.
A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.

Targeting media types
Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers. For example, this CSS targets printers:

@media print {
  /* … */
}

You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:

@media screen, print {
  /* … */
}

See media types for the list of available media types. Because media types describe devices in very broad terms, most of the originally-defined media types were deprecated, with just screen, print, and all remaining. To target more specific attributes, use media features instead.

Targeting media features
Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:

@media (hover: hover) {
  /* … */
}

Media features are either range or discrete.

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media print and (orientation: portrait) {
  /* … */
}

Many range features can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 1250px:

@media (max-width: 1250px) {
  /* … */
}

Refrence
https://www.w3schools.com/css/css3_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using#syntax