Responsive Web Design - Media Queries

Media queries help us determine the layout of our application based on various device types, specific characteristics and parameters such as screen resolution or device orientation.

We can use media queries in CSS, HTML and javascript.

CSS: We can use media queries in CSS with the @media at-rule. The @media rule allows us to conditionally apply parts of a style sheet based on the result of a media query.

HTML: We can use media queries in HTML elements to target specific media. We can apply media query to <style>, <link>, <source>, and other HTML elements with the media= attribute.

• <link> element to define the media to which a linked resource (typically CSS) should be applied.
• <source> element to define the media to which that source should be applied. (This is only valid inside <picture> elements.)
• <style> element to define the media to which the style should be applied.

Javascript: We can use the window.matchMedia() method to test the window against a media query. We can also use MediaQueryList.addListener() to add a listener that notifies us whenever the state of a query changes. With the help of these methods, our app can respond to changes in the device configuration, orientation, or state.

Media Queries in CSS:

Syntax
A media query is composed of a media type (optional) with one or multiple media feature expressions. Media queries are case-insensitive, and we can also combine various queries by using logical operators.

A media query returns true when the media type (if specified) matches the device on which a document is being displayed.

Media types
Media types describe a particular category or type of device. Using a media type is optional, and by default 'all' is used as the default media type.

Here is a list of media types:
all - for all devices.
print - Intended for paged material and documents viewed on a screen in print preview mode.
screen - Intended primarily for screens.
speech - Intended for speech synthesizers.
Examples:
We can target media queries for individual devices such as printers or audio-based screenreaders. For example, this CSS targets printers:

@media print { ... }

we can also target multiple devices in a single query. To target both screen and print devices, we can use:

@media screen, print { ... }

Media features
A media feature describes specific characteristics of the user agent, output device, or environment.
There are many media features available like width, device-width, aspect-ratio, height, device-height, hover, inverted-colors, monochrome, orientation, resolution.

Using media features, we can apply specific styles to widescreen monitors, computers that use mice, or devices that are being used in low-light conditions.
For example, we can apply some styles when the user's primary input mechanism (such as a mouse) can hover over elements:

@media (hover: hover) { ... }

Many media features are range features, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. e.g. to apply CSS styles only if our browser's viewport width is equal to or narrower than 12450px, we can use:

@media (max-width: 12450px) { ... }

Logical operators
We can use logical operators like not, and, and only to compose a complex media query.
and: to combine multiple media query, requiring all of them to be true

not : to apply styles when a media query returns false

only : The only operator is used to apply a style only if an entire query matches and is useful for preventing older browsers from applying selected styles.
We need to specify a media type while using the only operator.

, (comma) : Commas are used to combine multiple media queries into a single rule, which is a common way to do this. The styles are applied if any of the queries returns true.

E.g. To combine two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

To limit the styles to devices with a screen, we can chain these media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) { ... }