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.
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.
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.
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.
|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|
|update||How frequently the output device can modify the appearance of content|
|width||Width of the viewport including the width of the scrollbar|
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.
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.
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.
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.
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.