Media queries

Media queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. 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 initial 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, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.[6][7] Media queries use the @media CSS "at-rule".

Examples

The following are examples of CSS media queries:

@media screen and (display-mode: fullscreen) {
  /* Code in here only applies to screens in fullscreen */
}

@media all and (orientation: landscape) {
  /* Code in here only applies in landscape orientation */
}

@media screen and (min-device-width: 500px) {
  /* Code in here only applies to screens equal or greater than 500 pixels wide */
}

Media types

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

  • all (suitable for all devices)
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • speech
  • tty
  • TV

The media type "all" can also be used to indicate that a style sheet applies to all media types.[10]

Media features

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

FeatureValueMin/MaxDescription
colorintegeryesnumber of bits per color component
color-indexintegeryesnumber of entries in the color lookup table
device-aspect-ratiointeger/integeryesaspect ratio
device-heightlengthyesheight of the output device
device-widthlengthyeswidth of the output device
gridintegernotrue for a grid-based device
heightlengthyesheight of the rendering surface
monochromeintegeryesnumber of bits per pixel in a monochrome frame buffer
resolutionresolution ("dpi" or "dpcm")yesresolution
scan"progressive" or "interlaced"noscanning process of "tv" media types
widthlengthyeswidth of the rendering surface

References
  1. Media Queries Publication History 19 June 2012
  2. Håkon Wium Lie. "Cascading HTML Style Sheets". Retrieved 20 January 2013.
  3. "Basic HTML data types". www.w3.org.
  4. "Re: Feedback on Media Queries CR from Håkon Wium Lie on 2002-07-17 (www-style@w3.org from July 2002)". lists.w3.org.
  5. "Media queries". www.w3.org.
  6. "CSS media queries". Mozilla Developer Network and individual contributors. Retrieved 28 April 2017.
  7. "How to create media queries in Responsive Web Design". TechRepublic.
  8. "HTML link tag". W3Schools. Retrieved 28 April 2017.
  9. "Media Queries". World Wide Web Consortium. Retrieved 28 April 2017.
  10. "Media Queries". World Wide Web Consortium. Retrieved 28 April 2017.
  11. "Media Queries". Sitepoint. Retrieved 28 April 2017.


This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.