CSS Media Queries

max-width is the width of the target display area, e.g. the browser.

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.

^^ same goes for max-height and max-device-height.

<style>
  /* full size: */
  #test { 
    font-size: 16px;
    background-color: salmon; 
  }

  /* less than 600px wide (mobile phone size): */
  @media (max-width:600px){
    #test { 
      background-color: blue;
    }
  }

  /* between 600 and 800 pixels - try resizing the browser width: */
  @media (min-width: 601px) and (max-width: 800px){
    #test { 
      background-color: greenyellow;
    }
  }
    
  /* try print preview for print media type, will be capital letters: */
  @media print{
    #test { 
      font-size: 96px;
      font-variant: small-caps;
    }
  }
</style>

<div id="test">some content</div>

media types (case-insensitive):

all	Suitable for all devices.
braille	Intended for braille tactile feedback devices.
embossed	Intended for paged braille printers.
handheld	Intended for handheld devices (typically small screen, limited bandwidth).
print	Intended for paged material and for documents viewed on screen in print preview mode.
projection	Intended for projected presentations, for example projectors.
screen	Intended primarily for color computer screens.
speech	Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose.
tty	Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
tv	Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).