You are currently viewing Media Queries in CSS | Web Development

Media Queries in CSS | Web Development

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.

NameSummaryNotes
any-hoverDoes any available input mechanism allow the user to hover over elements?Added in Media Queries Level 4.
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4.
aspect-ratioThe width-to-height aspect ratio of the viewport
colorNumber of bits per color component of the output device, or zero if the device isn’t color
color-gamutApproximate range of colors that are supported by the user agent and output deviceAdded in Media Queries Level 4.
color-indexNumber of entries in the output device’s color lookup table, or zero if the device does not use such a table
device-aspect-ratioThe width-to-height aspect ratio of the output deviceDeprecated in Media Queries Level 4.
device-heightHeight of the rendering surface of the output device
device-widthWidth of the rendering surface of the output device
display-modeThe display mode of the application, as specified in the web app manifest’s display memberDefined in the Web App Manifest Spec.
forced-colorsDetect whether user agent restricts color paletteAdded in Media Queries Level 5.
gridDoes the device use a grid or bitmap screen?
heightHeight of the viewport
hoverDoes the primary input mechanism allow the user to hover over elements?Added in Media Queries Level 4.
inverted-colorsIs the user agent or underlying OS inverting colors?Added in Media Queries Level 5.
monochromeBits per pixel in the output device’s monochrome frame buffer, or zero if the device isn’t monochrome
orientationOrientation of the viewport
overflow-blockHow does the output device handle content that overflows the viewport along the block axis?Added in Media Queries Level 4.
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?Added in Media Queries Level 4.
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?
prefers-color-schemeDetect if the user prefers a light or dark color schemeAdded in Media Queries Level 5.
prefers-contrastDetects if the user has requested the system increase or decrease the amount of contrast between adjacent colorsAdded in Media Queries Level 5.
prefers-reduced-motionThe user prefers less motion on the pageAdded in Media Queries Level 5.
resolutionThe pixel density of the output device
scriptingDetects whether scripting (i.e. JavaScript) is available
updateHow frequently the output device can modify the appearance of content
widthWidth 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.

This Post Has One Comment

Leave a Reply