Description

Defines the media types, features and queries that can display a set of style rules.

Media queries are an important part of responsive web development, where the design of the site adjusts to different size windows and devices.

Queries can contain width, height, device-with, device-eight, color, color-index, monochrome, orientation, aspect-ratio, device-aspect-ratio, resolution, scan, grid. Many of those accept min or max prefix.

See also:

  • Media Queries test page ( resize the window and try different devices ).
  • W3C Media queries
Example

<link rel="stylesheet" type="text/css" media="print" href="print.css">
 
<style type="text/stylesheet">
@media screen and (min-width: 600px) {
   .column{
      float:none;
   }
}
</style>

See example: Media Queries test page

Values
all | braille | embossed | handheld | print | projection | screen | speech | tty | tv
Default value
all
Introduced in CSS version
2.1
Applies to elements
All
Inherited
N/A
Browser Support
BrowsersIEFirefoxSafariOperaChrome
Versions5.51160.2
Belongs to:

See the full list CSS properties and browser support: CSS Properties