CSS @media Rules

A media query returns data about the device the page displays on.

A @media rule uses media queries to creates a style for given device type.

They helps create responsive designs, printed layout, and screen reader styles.

Example

#

This example includes a @media query. Resize the browser and the background and text color will change when the screen width crosses 1000 pixels.

Henri Matisse was a French artist, known for both his use of color and his fluid and original draughtsmanship. He was a draughtsman, printmaker, and sculptor, but is known primarily as a painter.
<style>
  .background {
    padding: 15px;
    background: aliceblue;
  }

  @media only screen and (max-width: 1000px) {
    .background {
      background-color: steelblue;
      color: white;
    }
  }
</style>

<div class="background">
  Henri Matisse was a French artist,
  known for both his use of color and
  his fluid and original draughtsmanship.
  He was a draughtsman, printmaker, and
  sculptor, but is known primarily as a
  painter.
</div>

Using @media rules

The @media rule is a powerful feature that issues media queries.

Media queries allow a page to apply different CSS styles for different devices (desktop, phone, tablet, printer) and sizes.

For example, it can check the following:

  • media type: screen, speech, print
  • viewport width and height
  • device width and height
  • device orientation (landscape/portrait)
  • screen resolution

Media queries are used to create responsive design, printed document layout, or any screen readers style.

Media features check for the capability of the devices and provide more specific details to media queries.

Syntax

@media not | only mediatype and
       (mediafeature and | or | not mediafeature) {
CSS-Code;
}

Explanation:

  • not - reverts media query meaning
  • only - prevents old browsers that do not support media queries features from applying specified CSS styles. No effect on modern browsers.
  • and - combines media features with media type or other media features

All of these are optional, if not or only is used, media type must be specified. Different stylesheets can also be embedded for different media conditions.

<link rel="stylesheet" 
      media="screen and (min-width: 1280px)" 
      href="desktop.css">
<link rel="stylesheet" 
      media="screen and (max-width: 540px)" 
      href="mobile.css">

Media Types

Value Description
all Default, used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones, etc.
speech Used for screenreaders that "reads" the page out loud

Media Features

Value Description
any-hover If any input mechanism allows element hover
any-pointer If any available input mechanism is a pointer device
aspect-ratio Ratio between viewport width and height
color Output devices number of bits per color component
color-gamut Approximate range of colors that are supported by the user agent and output device
color-index Number of colors the device can display
grid If the device is a grid or bitmap
height Viewport height
hover If any input mechanism allows element hover
inverted-colors If a browser or underlying OS inverting colors
light-level Current ambient light level
max-aspect-ratio Maximum ratio between the display area width and height
max-color Output device maximum number of bits per color component
max-color-index Maximum number of colors the device can display
max-height Display area maximum height, such as a browser window
max-monochrome Maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution Maximum resolution of the device, using dpi or dpcm
max-width Display area maximum width, such as a browser window
min-aspect-ratio Minimum ratio between the display area width and height
min-color Output device minimum number of bits per color component
min-color-index Minimum number of colors the device can display
min-height Display area minimum height, such as a browser window
min-monochrome Minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution Device minimum resolution, using dpi or dpcm
min-width Display area minimum width, such as a browser window
monochrome Number of bits per "color" on a monochrome (greyscale) device
orientation Viewport orientation (landscape or portrait mode)
overflow-block If output device handles content that overflows the viewport along the block axis
overflow-inline If content that overflows the viewport along the inline axis be scrolled
pointer If any available input mechanism is a pointer device
resolution Output device resolution, using dpi or dpcm
scan The scanning process of the output device
scripting If scripting (JavaScript)
update How quickly can the output device modify the appearance of the content
width Viewport width

More Examples

Hide an element with smaller screensizes. Resize browser to see.

<style>
  @media only screen and (max-width: 768px) {
    .hidden {
      display: none;
    }
  }
</style>

<div class="hidden">
  This element is hidden with 
  screen sizes 0 to 768 pixels
</div>


Change colors with varying screen sizes. Resize browser to see.

This element has different colors depending on screen size
<style>
  .colored {
    background: teal;
    color: white;
    padding: 25px;
  }

  @media only screen and (min-width: 540px) {
    .colored {
      background: tomato;
      color: white;
    }
  }

  @media only screen and (min-width: 768px) {
    .colored {
      background: aliceblue;
      color: black;
    }
  }
</style>

<div class="colored">
  This element has different colors
  depending on screen size
</div>


Change colors based on device orientation. Resize browser to see.

This element changes colors when the screen orientation switches between landscape and portrait
<style>
  .orientation {
    background-color: aliceblue;
    color: black;
    padding: 15px;
  }

  @media only screen and (orientation: landscape) {
    .orientation {
      background-color: teal;
      color: white;
    }
  }
</style>

<div class="orientation">
  This element changes colors when
  the screen orientation switches
  between landscape and portrait
</div>


Printing the element below changes the font size and colors.

Printing this element will adjust the text style

<style>
  @media print {
    .printed {
      font-size: 24px;
      color: tomato;
    }
  }

  @media screen {
    .printed {
      font-size: 16px;
      color: black;
    }
  }
</style>

<p class="printed">
  Printing this element will
  adjust the text style
</p>

Browser support

This table shows when media support started for each browser.

Chrome
21.0 Jul 2012
Firefox
3.5 Jun 2009
IE/Edge
9.0 Mar 2011
Opera
9.0 Jun 2006
Safari
4.0 Jun 2009

You may also like

Guides