Game Development Reference
In-Depth Information
// Aspect ratio evaluates to 1/1
// Properties set: color, border, padding
// Properties overridden: color
@media all and (device-aspect-ratio: 1/1) {
h1 {
color: red;
border: 1px solid green;
padding: 20px;
}
}
// Aspect ratio evaluates to 1/1 and anything
landscape
// Properties set: color
// Properties overridden: color
@media all and (min-device-aspect-ratio: 1/1) {
h1 {
color: green;
}
}
In the previous code snippet, three separate media queries evaluate to the same
aspect ratio. The last query also uses a
min
modifier, meaning that it matches any
aspect ratio that is not 1/1 (as well as any aspect ratio that is exactly 1/1), but the
device width is still larger than the height (in other words, any media types of aspect
ratio 1/1 and any media types of orientation landscape).
In this case, when a media type is
landscape
(remember a square or 1/1 aspect
ratio is never considered landscape), only the third query matches the current state.
Thus, only the color attribute is assigned to the
h1
tag specified in that media query.
However, when the aspect ratio is in fact 1/1, then all three of media queries evalu-
ate to true, thus all three queries are applied to the elements they specify.
The first query only sets a color of the tag to green. The second query resets that tag
color and additionally applies a few more attributes to the tag. Finally, the third query
again resets the tag color, but doesn't touch any other property. The final result for
these composite queries for a media type with a 1/1 aspect ratio can be seen in the
following code snippet.
