CSS @media

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

<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>

@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">

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.

<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.

<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.

<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>

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

• Our CSS Media Queries
• Our HTML Reference Guide