Game Development Reference
In-Depth Information
h1 {
color: green;
}
}
@media all and (device-width: 1600px) {
h1 {
color: blue;
}
}
In the previous code example, if the screen width (not browser width) is exactly
1600px, the last media query will be active, regardless of any browser resizing. The
same goes for a page—if the entire width of the page calculates to exactly 1600px
wide, the corresponding media query will match. Anything more or less than that and
one of the other two media queries will be used instead. Again, the keywords
min
and
max
are valid modifiers that we can use in conjunction with this property.
The answer to the question about when to choose device-width or width and vice-
versa is simple: whenever the design of your application calls for it. In most cases,
the end result is the same. The only time when width is more appropriate than
device-width is when the user might use their browser windowing in a customized
size (not maximized) and the design is intended to reflow and auto adjust to the cur-
rent width of the browser. On the other hand, if a design is meant to remain the same
on a certain monitor width (or range of widths) regardless of the current browser
state, then device width might be a more elegant and efficient way to go about it.
device-height
Finally, the last possibility with querying the rectangular sides of a display, device-
height works exactly the same as device-width (other than the size measured). Al-
though the same result can be achieved with the other viewport queries described
so far, out of the four queries described so far, device-height might be the ideal can-
didate (along with device-width) to identify mobile orientation (portrait or landscape).
