media queries
{{Use dmy dates|date=January 2016}}
Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution (e.g. mobile and desktop screen size). It became a W3C recommended standard in June 2012,[http://www.w3.org/standards/history/css3-mediaqueries Media Queries Publication History] 19 June 2012 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,{{cite web|title=Cascading HTML Style Sheets|url=http://www.w3.org/People/howcome/p/cascade.html|accessdate=20 January 2013|author=Håkon Wium Lie}} but they did not become part of CSS 1. The HTML4 Recommendation from 1997 shows an example of how media queries could be added in the future.{{Cite web|url=http://www.w3.org/TR/html4/types.html#h-6.13|title=Basic HTML data types|website=www.w3.org}} 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.{{Cite web|url=http://lists.w3.org/Archives/Public/www-style/2002Jul/0087.html|title=Re: Feedback on Media Queries CR from Håkon Wium Lie on 2002-07-17 (www-style@w3.org from July 2002)|website=lists.w3.org}} The first public working draft for media queries was published in 2001.{{Cite web|url=http://www.w3.org/TR/2001/WD-css3-mediaqueries-20010404/Overview.html|title=Media queries|website=www.w3.org}} Media Queries Level 3, published as a Candidate Recommendation on 27 July 2010, became a W3C Recommendation on 19 June 2012. Proposed corrections were published on 5 April 2022.[https://www.w3.org/TR/mediaqueries-3/ Media Queries Level 3]
Media Queries Level 4, published as a Working Draft on 9 May 2017, were a W3C Candidate Recommendation Draft as of 25 December 2021.[https://www.w3.org/TR/mediaqueries-4/ Media Queries Level 4]
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.{{cite web|title=CSS media queries|publisher=Mozilla Developer Network and individual contributors|url=https://developer.mozilla.org/en-US/docs/CSS/Media_queries|accessdate=28 April 2017}}{{Cite web|url=https://www.techrepublic.com/blog/web-designer/how-to-create-media-queries-in-responsive-web-design/|title=How to create media queries in Responsive Web Design|website=TechRepublic}}
Media queries use the
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
The media type "all" can also be used to indicate that a style sheet applies to all media types.{{cite web|title=Media Queries|publisher=World Wide Web Consortium|url=http://www.w3.org/TR/css3-mediaqueries/|accessdate=28 April 2017}}
Media features
The following table contains the media features listed in the latest W3C recommendation for media queries, dated 6 June 2007.{{cite web|title=Media Queries|publisher=Sitepoint|url=http://reference.sitepoint.com/css/mediaqueries|accessdate=28 April 2017}}
| class="wikitable sortable" style="width: 100% | |||
| 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 |
orientation | "portrait" or "landscape" | {{no}} | Orientation of the screen |
resolution | resolution ("dpi", "dpcm" or "dppx") | {{yes}} | Resolution |
scan | "progressive" or "interlaced" | {{no}} | Scanning process of "tv" media types |
width | length | {{yes}} | Width of the rendering surface |
References
{{reflist}}
External links
- [http://www.w3.org/TR/css3-mediaqueries/ W3C – Media Queries recommendation 19 June 2012]
- [http://www.w3.org/Style/CSS/specs#mediaqueries W3C – CSS specs > Media Queries]
- [https://www.codespot.org/css-media-queries/ CodeSpot – CSS Media Queries]
Category:Cascading Style Sheets