Game Development Reference
In-Depth Information
// Aspect ratio is no more than four times as
wide as high
@media all and (max-aspect-ratio: 4/1) {
h1 {
color: green;
font-size: 3.0em;
}
}
// Aspect ratio is an exact square
@media all and (aspect-ratio: 1/1) {
h1 {
color: yellow;
font-size: 2.0em;
}
}
// Aspect ratio is no more than half as high as
wide - ERROR!
@media all and (max-aspect-ratio: 1/0.5) {
h1 {
color: green;
font-size: 3.0em;
}
}
The previous code snippet demonstrates various ways to calculate aspect ratio.
Keep in mind that the value of this attribute must always read as a single fraction,
with no floating point numbers involved. Simply said, the value must be in the form of
an integer, followed by a slash, followed by a second integer. The first integer refers
to the width value and the second to the height. Together, they form a ratio.
The first media query in the previous example tests for a viewport that is exactly two
width units for every one width unit. Put it another way, that expression checks for a
viewport that is twice as high as it is tall or half as wide as it is wide. In contrast, the
last media query attempts to generate the same result, but in reverse. The attempt
there was to query a media type that was at most twice as wide as it is tall. This ex-
pression would raise a silent expression (the expression would be ignored), because
