Game Development Reference
In-Depth Information
In the previous example, we check if the media is either landscape or portrait.
Whatever the orientation evaluates, the media query becomes activated. Note that
the third query attempts to set a third orientation based on erroneous conclusions.
One might imagine that the way to determine if something is landscape or portrait
is to take the ratio between the two—if the width is greater than the height then the
media is in landscape mode, otherwise it is in portrait mode. You can imagine how
someone might conclude that if both sides (width and height) are the same, that the
orientation is neither landscape nor portrait. However, it is important to remember
that a square figure is not landscape, but is indeed portrait. The key is to remember
that there are only two possible values for this property, precisely because there are
only two possible states that a media can be in at a time.
aspect-ratio
The aspect ratio property allows us to check for the proportion of the media's width
relative to its height (in this order). This property takes into account the actual ra-
tio between the width and height media query values, meaning that dynamic
changes to the viewport width and height affect this property directly. The min and
max keywords can be used in the evaluation of this property.
// Aspect ratio is exactly twice as high as wide
@media all and (aspect-ratio: 1/2) {
h1 {
color: blue;
font-size: 1.0em;
}
}
// Aspect ratio is at least three times as high
as wide
@media all and (min-aspect-ratio: 1/3) {
h1 {
color: red;
font-size: 0.5em;
}
}
Search WWH ::




Custom Search