Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (eg smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012 , [1] and is a cornerstone technology of responsive web design (RWD)

History

Media queries were first sketched in Håkon Wium Lie’s original CSS proposal in 1994, [2] but they did not become part of CSS1 . The HTML4 Recommendation from 1997 shows an example of how Media Queries could be added in the future. [3] In 2000, W3C started work on Media Queries and also on another scheme for supporting various devices: CC / PP . The two address the same problem, but CC / PP is server-centric, while Media Queries are browser-centric. [4] The first public working draft for Media Queries was published in 2001, [5] and the specification became a W3C Recommendation in 2012 after browsers added support.

Usage

A media query consists of a media type and one or more expressions, including media features , which resolve to either true or false. The result of the query is true if the media type is in the media query matches the type of device When a media query is true, the corresponding style is applied, following the normal cascading rules. [6] [7]

Here is a simple example:

@ media screen and ( min-width : 500px ) { ... }

Media types

A media type can be declared in an HTML document using the “media” attribute inside of a <link> element. The value of the “media” attribute will be displayed. [8] Media types can also be declared in XML processing instructions, the @import at-rule, and the @media at-rule. CSS2 defines the following as media types: [9]

  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • speech
  • tty
  • TV

The media type “all” can be used to indicate the style of the media. [10]

Media features

The following table contains the media features listed in the latest W3C recommendation for media queries, dated 6 June 2007. [11]

feature Value Min / Max Description
color integer yes number of bits per color component
color-index integer yes number of entries in the color lookup table
device-aspect ratio integer / integer yes aspect ratio
device-height length yes height of the output device
device-width length yes width of the output device
grid integer No. true for a grid-based device
height length yes height of the rendering surface
monochrome integer yes number of bits per pixel in a monochrome frame buffer
resolution resolution (“dpi” or “dpcm”) yes resolution
scan “progressive” or “interlaced” No. scanning process of “tv” media types
width length yes width of the rendering surface

References

  1. Jump up^ Media Queries Publication History19 June 2012
  2. Jump up^ Håkon Wium Lie. “Cascading HTML Style Sheets” . Retrieved 20 January 2013 .
  3. Jump up^ http://www.w3.org/TR/html4/types.html#h-6.13
  4. Jump up^ http://lists.w3.org/Archives/Public/www-style/2002Jul/0087.html
  5. Jump up^ http://www.w3.org/TR/2001/WD-css3-mediaqueries-20010404/
  6. Jump up^ “CSS media queries” . Mozilla Network Developer and individual contributors . Retrieved 28 April 2017 .
  7. Jump up^ How to create media queries in Responsive Web Design – 31 July 2012
  8. Jump up^ “HTML link tag” . W3Schools . Retrieved 28 April 2017 .
  9. Jump up^ “Media Queries” . World Wide Web Consortium . Retrieved 28 April2017 .
  10. Jump up^ “Media Queries” . World Wide Web Consortium . Retrieved 28 April2017 .
  11. Jump up^ “Media Queries” . Sitepoint . Retrieved 28 April 2017 .