CSS @media

CSS @media

CSS @media is an at-rule statement, used in media queries.

The result of media queries can be, height and width of a device, viewport, orientation or resolution of a device.

CSS @media, can contain any number of media queries, and each of the media queries can contain an media type and one or more media feature expressions.

The styles specified within it will only be applied if the media query returns true, for the given requirement specified in it.

Example

Try Yourself

In the above example, we have created a list with four color names in it (Red, Blue, Green, Black) and declared an id value for each list items.

Next in CSS, using media feature expression hover, we allocated a color for each list item.

So that, if the mouse is moved over the list item, its color will be changed according to the color we specified in the media type.

We also specified the max-width and min-width for the screen.

So as the page width changes, color of the screen will be changed according to the color we specified in the media type.


Media Features

The following are the list of media features used in @media,

  • width : It is used to specify the width of the viewport.
  • height : It is used to specify the height of the viewport.
  • aspect-ratio : It is used to specify the width-to-height aspect ratio of the viewport.
  • orientation : It is used to specify the orientation of the viewport.
  • resolution : It is used to specify the resolution of the output device.
  • scan : It is used to specify the scanning process of the output device.
  • grid : It is used to specify whether the device use a grid or bitmap screen.
  • update : It is used to specify, how quickly an output device can modify the contents appearance.
  • overflow-block : It is used to specify, how does the output device handle contents that overflows the viewport along the block axis?
  • overflow-inline : Can content that overflows the viewport along the inline axis be scrolled?
  • color : It is used to specify the number of bits per color component for the output device.
  • color-gamut : It is used to specify the range of colors that are supported by the user agent and output device.
  • color-index : It is used to specify the Number of entries in the output device's color lookup table, or zero if the device does not use such a table.
  • display-mode : It is used to specify the display mode of the application.
  • monochrome : It is used to specify bits per pixel in the output device's monochrome frame buffer.
  • inverted-colors : It is used to specify, Is the user agent or underlying OS inverting colors?
  • pointer : It is used to specify, if the primary input mechanism is a pointing device.
  • hover : Does the primary input mechanism allow the user to hover over elements?
  • any-pointer : It is used to specify, if any available input mechanism a pointing device
  • any-hover : It is used to specify, if any available input mechanism a pointing device