Game Development Reference
In-Depth Information
Understanding media queries
Media queries have been around since HTML4 and CSS2. Originally, the CSS media
attribute was used to specify a different stylesheet to be loaded based on the media
type loading the page, such as screen, TV, projection, or handheld. In HTML5, media
queries also allow for expressions that check for other properties of the user agent
viewing the document such as viewport width, height, resolution, and so on.
A media query is made up of two parts, namely a media type declaration and one or
more expressions that evaluate to either true or false. Any CSS rules contained nes-
ted within the media query declaration are applied whenever any of the media query
expressions evaluate to true. Alternatively, every CSS rule inside a stylesheet refer-
enced by a link tag whose media attribute contains a truthy media query expression
is applied to the specified media type.
// ---------------------------------
// Media queries on the HTML file
// ---------------------------------
<link rel="stylesheet"
media="screen and (min-device-width: 960px)"
href="default-style.css" />
// ---------------------------------
// Media queries within a CSS file
// ---------------------------------
@media screen and (min-device-width: 960px) {
html, body {
margin: 0;
padding: 0;
}
/* ... */
}
Search WWH ::




Custom Search