@media - At-rule CSS

Description of the @media at-rule.

@media is an at-rule that has existed for a long time in the CSS language. However, it has been significantly enhanced with media queries (media-queries). It allows styles to be applied based on the capabilities of the device on which the page is being viewed.

The example below applies zero margins on the left and right if the screen being used is taller than it is wide (portrait).

But it is just as possible to test a value by comparison with the operators > or <, or even by using a range:

In its initial definition, @media only allowed targeting the device based on its type: printer, screen, smartphone, etc. By using this directive, it was therefore possible to define layouts specific to each type of device. However, this solution was abandoned because it lacked precision. Indeed, a smartphone screen sometimes has as much resolution as a desktop monitor. And many other characteristics are often needed: presence of a precise pointing device (mouse, tablet), the number of colors the screen can display, etc.

Since CSS3, the @media directive has been enhanced and now allows targeting a device much more precisely, based on its capabilities. This is what is referred to as a media query.

If, however, you wish to consult the explanations on the old syntax of @media, please refer to the end of this page.

Available media queries.

The complete syntax of media queries allows targeting a device much more precisely than just by its type: one can target the device based on its characteristics (media features) such as resolution, its ability to display colors, the presence of a mouse, etc.

List of media-queries features:

General syntax of the @media directive.

General syntax of media queries.

• @media (width >= 900px) { ... } @media (min-width:900px) { ... } @media screen and (min-width:900px) { ... }

  Comparison to a numeric value.

  All of these syntaxes are equivalent and target devices with a width definition of 900 pixels or more. The first syntax, which was defined most recently, is the most readable. It is now well supported and can be used with little risk of compatibility issues with current browsers. However, refer to the compatibility table at the bottom of this page.

  The practice of preceding the condition with screen and is a precaution that has become almost unnecessary: it ensured compatibility with old browsers. Even if the browser does not recognize the part in parentheses, it still recognizes the word screen.

  It can be noted that all values are followed by a unit, which are the usual units in CSS (see CSS dimension units). However, relative units should be avoided, as they do not make much sense in this context, although they are still accepted by the syntax. They are then determined relative to the initial value: for example, the em unit is calculated relative to the initial value of the font-size property.

  The condition must be written in parentheses.

  In some cases, it is enough to specify the name of the feature without providing a value. For example, (color) targets devices capable of displaying colors, excluding monochrome devices.

  If a condition refers to a feature that does not exist on the device in question, the media query is false. For example, a condition on the pointer (mouse) when the device is a printer makes the entire query false: the styles are not applied.

• @media (900px <= width <= 1200px) { ... } @media (width >= 900px) and (width <= 1200px) { ... } @media (min-width:900px) and (max-width:1200px) { ... }

  Range of values.

  The three syntaxes above are equivalent and target devices whose horizontal definition is between 900 pixels and 1200 pixels, inclusive. The first syntax is naturally much clearer since it is possible to define a range in a single statement.

• @media (orientation: portrait) { ... }

  Comparison to a predefined value.

  Some features are not expressed in numeric values. In our example, the orientation can be portrait or landscape. The operators > and < have no meaning in this case. Similarly, syntaxes with the prefixes min- and max- are not possible for non-numeric features: min-orientation does not make sense.

  The syntax here uses the colon character. Be careful not to use the equals sign, which would be more intuitive since the operators <= and >= are recognized.

• @media (width >= 1200px) and (height >= 900px) { ... } @media (width >= 1200px), (height >= 900px) { ... } @media (width >= 1200px) or (height >= 900px) { ... }

  Combination of several conditions.

  Multiple conditions can be combined using a logical AND. In this case, the word and must be specified, or using a logical OR, which is represented by a comma between the criteria or by the word or. In any case, each condition must be enclosed in parentheses.

  If the word or is used instead of a comma, and the writing involves both and and or, it is mandatory to specify the order of operations using parentheses.

  @media (height < 900px) and (width < 900px) or (width > 1000px) is incorrect. @media (height < 900px) and ((width < 900px) or (width > 1000px)) is correct.
• @media not (width >= 1200px) { ... } @media not (width >= 1200px), (height >= 900px) { ... }

  Inverting a condition.

  The word not is the usual negation operator. Our first example targets devices whose horizontal definition is less than 1200 pixels.

  In the second example, it should be noted that the negation only applies to the first condition. It therefore targets devices whose horizontal resolution is less than 1200 pixels and also those whose vertical resolution is greater than 900 pixels (the negation does not apply to this second query).

  The word not must always be followed by a space before the opening parenthesis to avoid confusion with a function.

• @media only print and (monochrome) { ... }

  The keyword only.

  The word only had been defined to ensure compatibility with older browsers, which only recognize the media type (print) and not the media queries that follow (monochrome).
  Without this precaution, older browsers might incorrectly apply the styles to all printers, even those that are not monochrome.

  The word only, added before the device type, is interpreted by older browsers as an unknown device and wrongly prevents the application of styles to all printers.
  only is neutral for more modern browsers that handle the full syntax of media queries.

  However, this precaution is now unnecessary considering the fact that virtually all browsers recognize the full syntax of media queries.

Media queries to evaluate device dimensions.

• @media (width < 21cm) { ... } @media {height < 29.7cm) { ... } @media (device-width < 21cm) { ... } ✗ @media {device-height < 29.7cm) { ... } ✗

  The two properties width and height correspond to the width and height of the viewport if it is a continuously scrolling device like a screen, or to the dimensions of the page box if it is a paged device like a printer.

  width and height can be compared to any value followed by a dimension unit (see CSS dimension units). Our example uses centimeters, which is common when describing a printer; for a screen, pixels are generally used instead.

  The old terms device-width and device-height should no longer be used.

  If you are viewing this page on a desktop PC, the element below should be blue. When you reduce the window width, it becomes transparent.

  (width >= 1000)
• @media (aspect-ratio > 1) { ... } @media (device-aspect-ratio > 1) { ... } ✗

  The ratio is calculated using the formula: width divided by height. This information helps determine the orientation (see below) and the shape of the screen. In particular, a ratio of 1 indicates a square screen, like that of a smartwatch.

  The term device-aspect-ratio is obsolete and should no longer be used, although some browsers still recognize it for compatibility reasons.

  The background color of the element below responds to the screen orientation. On a PC, you can simulate this by reducing the width of the browser window.

  (aspect-ratio > 1)
• @media (orientation: portrait) { ... }

  orientation can only take two values: portrait or landscape. The operators < and > are therefore not accepted with orientation.

  The orientation is set to landscape when the width is greater than or equal to the height. A square screen, like that of a watch, will therefore have a landscape orientation.
  On a mobile device like a phone, orientation allows you to determine whether the device is held vertically or horizontally.

  Sur un terminal mobile comme un téléphone, orientation permet de déterminer si l'appareil est tenu verticalement ou horizontalement. Sur un PC de bureau vous pouvez simuler cela en réduisant la largeur de la fenêtre jusqu'à la rendre inférieure à sa hauteur.

  (portrait:portrait)

Media queries about rendering quality.

• @media (resolution > 300dppx) { ... }

  This media query targets devices based on screen resolution, that is, the number of pixels over a given distance. Most of the time, the screen resolution is the same horizontally and vertically; if not, the vertical resolution is taken into account.

  The value compared to resolution must be followed by a resolution unit such as dpi (Dot Per Inch or dots per inch). See CSS units of resolution.

  The value infinite can be used; it corresponds to devices that are not pixel-based, such as plotters.

  On a desktop computer screen, at least the first rectangle should be displayed in blue. On a mobile phone, it is possible that both rectangles are blue.

  (resolution > 100dpi)

  (resolution > 200dpi)
• @media (shape: rect) { ... } ⚠ @media (shape: round) { ... } ⚠

  With shape it is possible to test the screen shape, between round (round) and rectangular (rect). This feature will become increasingly useful with the emergence of smartwatches.

  • rect: the screen has a rectangular shape or something close to it, like a rectangle shape with rounded corners.
  • round: the screen has a circular shape, or one that comes close to it, like an ellipse.

  If your browser recognizes the shape media-query (and you are viewing the page on a rectangular screen), the element below will be blue. Otherwise, it will be transparent.

  (shape:rect)

Media queries about terminal technology.

The increasingly important diversification of peripherals requires the ability to test the technology used: cathode-ray tube (disappearing), LCD screen, printer, plotter, display panel, smartwatch, augmented reality system, etc.

• @media (scan: interlace) { ... }

  This media queries request targets devices based on the type of screen scanning. It allows distinguishing cathode ray tube screens from modern LCD screens. However, cathode ray tube screens have become very rare nowadays. Some fonts are poorly rendered on interlaced screens, especially serif fonts.

  The possible values are:

  • interlace: cathode ray tube screens operate on this principle, which helps reduce flicker and therefore eye strain. This involves drawing the even lines during the first scan, and the odd lines during the next scan.
  • progressive: all current screens (LCD) operate on this principle.
  (scan:progressive)
• @media (grid) { ... }

  This syntax detects if the screen reconstructs characters from a fixed-dimension dot matrix. No screen works like that anymore: this query always returns false.

  (grid)
• @media (update: slow) { ... }

  CThis media query targets screens based on their ability to update content after the initial display. Very useful for deciding whether animations can be enabled or not. Similarly, responses to user actions (pseudo-class :hover) may render poorly on a slow screen.

  Possible values are:

  • none: the update is no longer possible after the first return. This is the case with printers, for example.
  • slow: screen refresh is possible but slow.
  • fast: the screen refresh rate is fast enough to display animations smoothly.

  The value can be omitted. In this case, (update) indicates that an update is possible but does not provide any information about its speed.

  The element below will probably be blue, unless your browser does not recognize the update media query.

  (update:fast)
• @media (overflow-block: none) { ... } @media (overflow-inline: none) { ... }

  These two media queries target devices based on their behavior when content overflows. For overflow-block, it is an overflow in the block direction, that is, the vertical direction for Latin languages, and for overflow-inline it is the overflow in the inline direction.

  The possible values for overflow-block are:

  • none: overflow is impossible. Excess content is not displayed, as is the case on an electronic display board.
  • scroll: the excess content is displayed outside the visible area; the reader can view it by scrolling. This is the case with screens.
  • paged: the excess content is sent to a new page. This is the case with printers.

  If the value is omitted, (overflow-block) indicates that overflow is possible but does not specify the type of overflow.

  For overflow-inline, the possible values are:

  • none: the excess content is not displayed, and there is no way for the user to make it appear.
  • scroll: The reader can reveal the excess content by scrolling the screen (for example, the presence of scroll bars).

  If the value is omitted, (overflow-inline) is equivalent to (overflow-inline: scroll).

  On the samples below, the first should be blue on a screen, and the second should be blue in a print preview.

  (overflow:scroll)

  (overflow:paged)

Media queries related to color management.

• @media (color) { ... } @media (color > 24) { ... }

  This media query allows you to evaluate the device's ability to display colors. The first syntax only determines whether the device is in color or not. The second allows you to test the number of bits reserved for each color. If the device is monochrome, the number of bits is 0.

  While the first syntax is useful for distinguishing, for example, a color printer from a black-and-white printer, but the second one does not provide very precise information about the device's color management. It will probably be more useful to use color-gamut (see below).

  On your screen, the first element will probably be blue, not the second. Colors are indeed managed with 8 bits per primary color on most systems.

  (color >= 8)

  (color >= 16)
• @media (color-index > 128) { ... }

  This media query allows targeting devices that handle indexed colors. The indicated value corresponds to the number of colors in the index. If the device does not handle colors by index, the value is 0.

  Below, the first element should be blue (no indexed colors), and the second one transparent.

  (color-index >= 0)

  (color-index > 100)
• @media (monochrome) { ... } @media (monochrome >= 4) { ... }

  The first syntax targets monochrome devices. The second is more precise: it targets monochrome devices that handle gray with at least 4 bits per pixel (16 levels of gray).

  The sample below must be transparent because you are viewing this page on a color screen (probably).

  (monochrome)
• @media (color-gamut: p3) { ... }

  This syntax targets devices capable of displaying the p3 color space. Refer to this presentation of color spaces if necessary. color-gamut allows sending images that best match the device's capabilities.

  The main accepted values are:

  • srgb: the device is capable of reproducing almost all the colors of the srgb space, which nowadays should always be the case, this color space being the least demanding, except of course if it is a monochrome device.
  • p3: color space wider than sRGB.
  • rec2020: color space even wider than p3.

  color-gamut can be true for multiple values. For example, if a display supports the rec2020 space, it will also support p3 and sRGB. For this reason, care should be taken to write the @media directives in ascending order (starting with srgb and ending with the widest color space).

  Unless you are using a high-end monitor, it is likely that its gamut is sRGB. You can check it if the first element is blue and the second is transparent.

  (color-gamut:sRGB)

  (color-gamut:p3)
• @media (dynamic-range: high) { ... }

  dynamic-range describes the maximum contrast that a screen can display. This characteristic is broken down into three parts:

  • The maximum brightness.
  • The maximum contrast, that is to say the ratio between the maximum brightness and the minimum brightness that the system is capable of delivering.
  • Color depth, in other words the number of bits used to encode the colors.

  Possible values are:

  • high: the device supports high brightness and high contrast. In addition, colors are displayed in at least 24 bits.
  • standard: all devices, even those that do not have the characteristics described above.

  Here too, it is likely that your screen falls into the standard category.

  (dynamic-range:standard)

  (dynamic-range:high)
• @media (inverted-colors: inverted) { ... }

  A color inversion can occur, for example, when the user switches their device to night mode (or dark mode). inverted-colors does not respond when the inversion is due to a rule in the style sheet.

  The possible values for inverted-colors are:

  • none: when the colors are displayed normally.
  • inverted: the colors appear inverted (light shades are dark, and vice versa).

  The value can be omitted: (inverted-colors) is equivalent to (inverted-colors:inverted).

  While color inversion improves text readability in certain conditions, it poses a problem with images and videos because these elements are also displayed in negative. To compensate for this problem, browsers generally include the code below in their built-in style sheet:

  @media (inverted-colors) { img, video { filter: invert(100%); } }
  (inverted-color:none)

  (inverted-color:inverted)
• @media (video-color-gamut: srgb) { ... }

  This media query has the same role as color-gamut but applies to videos. The possible values are also the same: srgb, p3, etc.

  If your browser recognizes the video-color-gamut media query, the first rectangle will be blue, the second transparent.

  (video-color-gamut:srgb)

  (video-color-gamut:p3)
• @media (video-dynamic-range: hight) { ... }

  The values and role of video-dynamic-range are the same as for dynamic-range but they apply more specifically to videos.

  If your browser recognizes the video-dynamic-range media query, at least the first rectangle will be blue.

  (video-dynamic-range:standard)

  (video-dynamic-range:high)
• @media (horizontal-viewport-segments: 2) { ... } @media (vertical-viewport-segments: 2) { ... }

  Sometimes the screen is physically divided into several parts. This is the case, for example, with foldable phones that have a hinge in the middle of the screen, or with huge screens used for events, which are made up of multiple screens placed side by side.

  Most home screens consist of a single segment. But perhaps you have a screen that has several.

  (vertical-viewport-segments:1)

  (vertical-viewport-segments > 1)
• @media (display-mode: fullscreen) { ... }

  This media queries Possible values are:

  • browser: classic display of the page in a browser.
  • fullscreen: the fullscreen display is accessible on Windows with the F11 key. Everything that is not the page itself is hidden: menu bar, toolbar, address bar, window title, etc.
  • standalone: the page is displayed as if it were an application. Web-specific navigation accessories are hidden (address bar, navigation buttons, etc.), but system elements are shown (window titles, for example).
  • minimal-ui: similar to standalone but some elements allowing navigation are displayed.

  In normal view, only the first element below is blue. If you switch to full-screen mode (F11 on Windows), it will be the second item that turns blue.

  (display-mode:browser)

  (display-mode:fullscreen)
• @media (environment-blending: opaque) { ... }

  Literally, this media query allows you to test how the display blends with the real environment. For example, driver assistance screens in a car are transparent and overlay their display on the view of the surroundings. More generally, this applies to all augmented reality applications.

  Possible values are:

  • opaque: the screen is not transparent.
  • additive: the screen is transparent and overlays its display onto real vision. Black is rendered as transparent.
  • subtractive: the screen 'subtracts' its display from the real view: it is the white that has no effect because it is rendered as transparent. This type of display corresponds, for example, to a screen integrated into a mirror.

  On a traditional PC or a mobile phone, it's the first rectangle that will be blue. If you are lucky enough to have a screen of the additive type, it will be the second rectangle. If your browser does not support the media query environment-blending the two rectangle will be transparents.

  (environment-blending:opaque)

  (environment-blending:additive)

Media queries for pointer detection.

• @media (pointer: fine) { ... } @media (any-pointer: fine) { ... }

  These two syntaxes allow you to test for the presence of a pointer such as a mouse, trackball, etc. pointer only considers the primary pointer, while any-pointer takes all pointing devices into account when there are multiple.

  The possible values for pointer and any-pointer are:

  • none : aucun périphérique de pointage n'est disponible.
  • coarse : un périphérique est disponible mais il est imprécis, et ne permet pas de cliquer sur de petits éléments.
  • fine : un périphérique de pointage précis est disponible.

  The value can be omitted. In this case, (pointer) indicates the presence of a pointing device, without specifying whether it is a fine or coarse pointing device.

  Here is a sample code that ensures a minimum size for buttons when the pointing device is imprecise:

  @media (pointer:coarse) { input[type='button'], button { min-with: 100px; min-height:50px; } }

  A mouse is precise pointer: on a PC, it's therefore the first rectangle that should be blue. On a phone, however, fingers are less precise, so it will be the second rectangle that will be blue.

  (pointer:fine)

  (pointer:coarse)
• @media (hover: none) { ... } @media (any-hover: none) { ... }

  These two syntaxes allow testing whether the terminal can detect the hovering of an element. A standard mouse, for example, allows you to hover over an element without clicking it. However, on a mobile phone screen, it is not possible to detect the finger before it touches the screen. This media query allows deciding whether it is relevant to use the pseudo-class :hover.

  The possible values for hover and any-hover are:

  • none: hover detection is not possible. This is the case if the device is a mobile phone, for example.
  • hover: Hovering can be detected. This will be the case for all devices with a mouse or a similar peripheral.

  The value can be omitted. In this case, (hover) is equivalent to (hover:hover) and (any-hover) is equivalent to (any-hover:hover).

  Below, the two rectangles should be blue on a standard PC.

  (hover)

  (any-hover)
• @media (nav-controls: none) { ... }

  This media query allows detecting whether the browser offers visual navigation aids, such as a button to go back to the previous page. Keyboard shortcuts are not affected. On a mobile phone, gestures with a special function are also not affected (such as swiping left to go back to the previous page).

  nav-controls is useful in cases where a web page absolutely requires buttons to navigate between pages, and where this page can be embedded in an application that is not a browser and does not necessarily provide these navigation features.

  The possible values for nav-controls are:

  • none: the application that displays the page does not offer navigation accessories.
  • back: the application that displays the page offers at least one back button to the previous page.

  The value can be omitted. In this case, (nav-controls) is equivalent to (nav-controls:back).

  Example: removing the back button provided on the page, when the browser offers its own back button:

  @media (nav-controls: back) { #back-button {display:none;} }
  (nav-controls:none)

  (nav-controls:back)

User preferences.

Many options to improve readability are offered by operating systems. The user can choose to enable or disable these options. Other settings can be adjusted automatically by the system or by the browser: for example, when the ambient light is low, the dark color theme is usually activated. Conversely, in bright ambient light, the contrast is increased to make reading easier.

The media queries that follow allow the style developer to take these parameters into account.

• @media (forced-colors: active) { ... }

  forced-colors checks if the high contrast display mode is enabled in the operating system. In this mode, colors are adjusted to always provide maximum contrast and improved readability.

  The possible values for forced-colors are:

  • none: when the selected display mode is normal.
  • active: when the selected display mode is high contrast.

  The value can be omitted: (forced-colors) is equivalent to (forced-colors:active).

  If the "High Contrast" mode is enabled on your computer, the second rectangle should be blue.

  (forced-colors:none)

  (forced-colors:active)
• @media (prefers-color-scheme: dark) { ... }

  This media queries request allows you to know the color theme chosen by the user.

  Possible values for prefers-color-scheme are:

  • light : the user has chosen a light theme.
  • dark : the user has chosen a dark theme.

  The W3C specification states that new values may be defined in the future. Therefore, it is not recommended to consider light and dark as two opposing values. If it is necessary to write styles when the dark theme is chosen, and styles otherwise, use the not operator.

  You can use the Windows settings panel to switch from light mode to dark mode. Then observe the color of the rectangles.

  (prefers-color-scheme:light)

  (prefers-color-scheme:dark)
• @media (prefers-contrast: less) { ... }

  This media query checks if the user has chosen a value for contrast (or if they have not adjusted this setting)).

  prefers-contrast can take the following values:

  • no-preference: the user did not change the contrast value.
  • less: the user requested a reduction in contrast.
  • more: the user requested an increase in contrast.
  • custom: the user requested a specific contrast value.

  The value can be omitted. In this case, (prefers-contrast) indicates that the user has changed the contrast settings, but without specifying whether it is an increase or a decrease.

  (prefers-contrast:no-preference)

  (prefers-contrast:less)
• @media (prefers-reduced-data: reduce) { ... }

  This media query checks if the user has chosen to reduce the amount of data to be transferred. In this case, it is recommended to provide an alternative content that is more data-efficient.

  Possible values for prefers-reduced-data are:

  • no-preference: the user did not choose to reduce the data volume.
  • reduce: the user requested that the amount of data transferred be reduced.

  If the value is omitted, it is equivalent to reduce.

  Example. When asked to reduce the data volume, the page's background image is not displayed:

  body {background-image:url('...'); @media (prefers-reduced-data) { body {background-image:none;} }
  (prefers-reduced-data:no-preference)

  (prefers-reduced-data:reduce)
• @media (prefers-reduced-motion: reduce) { ... }

  This media query tests whether the user has opted for reduced motion.

  Possible values for prefers-reduced-motion are:

  • no-preference: the user did not choose to reduce animations.
  • reduce: the user requested that animations be reduced.

  The value can be omitted. In that case, the syntax is equivalent to (prefers-reduced-motion: reduce).

  (prefers-reduced-motion:no-preference)

  (prefers-reduced-motion:reduce)
  <
• @media (prefers-reduced-transparency: reduce) { ... }

  The prefers-reduced-transparency query checks if the user has chosen to reduce transparency or translucency effects.

  prefers-reduced-transparency can take the values:

  • no-preference: the user has not opted for a reduction in transparency.
  • reduce: the user requested that transparency no longer be managed..

  The value can be omitted. In this case, (prefers-reduced-transparency) is equivalent to (prefers-reduced-transparency: reduce).

  (...-transparency:no-preference)

  (...-transparency:reduce)

Browsers compatibility with the @media at-rule.

The first column of the table below concerns the use of @media to target a type of device (screen, printer...). This usage is well supported by all current browsers.
It is also the case for handling full media queries, targeting the device based on its characteristics (2nd column).

The following columns relate to specific media queries such as resolution, pointer, or hover.

Column 1

Support for @media queries in their old syntax: targeting a device by its type: print for example. This method lacks precision and is no longer recommended by the W3C.

Column 2

Support by browsers of the @media directive to target a device based on its characteristics: dimensions, resolution, orientation, etc.

Column 3

Support for syntax using < and > instead of min- and max- to express a range of values.
Example: 720 <= width < 1200

Column 4

Allows to define a multimedia query targeting the device's resolution, particularly based on the pixels of the device used per CSS unit.

Column 5

Supports media queries based on the presence and accuracy of the user's pointing device, as well as their ability to hover over page elements. This includes media features pointer, any-pointer, hover, and any-hover.

Column 6

Support for the inverted-colors request to test if the user has inverted the colors.

Column 7

Support for the prefers-reduced-data media query, which determines whether browsers try to minimize the amount of data loaded.

Column 8

Support for the media query prefers-reduced-transparency which checks if the user has requested reduced transparency.

Notes:

(1) Internet Explorer does not support nested media queries.

(2) Internet Explorer and Opera Mini support only the dpi unit in media queries (does not support dppx or dpcm).

(3) Disabled by default. Can be enabled with the enable-experimental-web-platform-features flag.

1

Old Media
queries

2

@media
at-rule

3

Range
syntax

4

Resollution
media query

5

Interaction
media features

6

inverted-colors
media query

7

prefers-reduced-data
media query

8

prefers-reduced-transparency
media query

Estimated overall support.

97%

96%

92%

94%

96%

13%

0%

0%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

2

KaiOS Browser

Samsung Internet

Androïd Brower

Chrome pour Androïd

3

Baidu Browser

QQ Browser

3

Safari

Safari sur IOS

Chrome

3

Edge

3

Firefox

Opéra

3

Opéra Mobile

UC Browser pour Androïd

3

Firefox pour Androïd

Opéra mini

2

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

See also, regarding media queries.

The Media Queries specification covers everything related to media queries.

At-rules:

⚠

@custom-media

Defines a custom media query.