HTML5 and Mobile Game Development - Learn HTML5 by Creating Fun Games - page 360

{
h1 {
color: orange;
font-size: 10.5em;
}
}
// Aspect ratio evaluates to 1/1
@media all and (device-aspect-ratio: 17/17) {
h1 {
color: transparent;
font-size: 0.0em;
display: none;
}
}
The previous code example shows six media query expressions, all of which evalu-
ate to the same aspect ratio. Whether the original expressed ratio is a duplicate of a
previous value or a different value that reduces to the same ratio, the end result is the
same. When equal ratios are found and no other expression breaks the tie by further
qualifying the whole expression, then the last occurrence of the duplicate expression
becomes the only active query for values not unique to the previous expressions.
For example, if two or more expressions evaluate to the same aspect ratio, whatever
CSS attributes that both expressions had in common are given priority to the last oc-
currence of the query. Unique values between each expression get cascaded to the
final evaluation.
// Aspect ratio evaluates to 1/1
// Properties set: color, font-size
// Properties overridden: none
@media all and (device-aspect-ratio: 1/1) {
h1 {
color: blue;
font-size: 1.5em;
}
}