States of a Windows 8 application - Build Windows 8 Apps with HTML5 and JavaScript - page 195

}
@media screen and (-ms-view-state: snapped) {
}
@media screen and (-ms-view-state: fullscreen-portrait) {
}
These are just predefined media queries for the four view states of a Windows Store application.
All you need to do is add CSS settings that you want to be applied to each particular view state. For
example, to shrink the font size only when the application is snapped, you enter the following code to
default.css :
@media screen and (-ms-view-state: snapped) {
.flexible-container {
font-size: 2em;
}
}
You basically overwrite any existing styles with the values that apply in the specific scenario. You
don't need to completely rewrite the style; you just indicate what's different.
CSS media queries vs. resize events
In the course of this chapter, you have learned two techniques to deal with view changes—detecting
resize events and CSS media queries. What's the difference and when should each be used?
CSS media queries are managed by the host browser and are limited to applying a different CSS
style sheet to the application. If all you need is to change font sizes, adjust some fixed widths or
heights you may still have, or fix margins and padding, then using CSS media queries is just fine and
effective. Moreover, media queries also allow you to hide elements and move them around.
There might be situations, instead, where you can't just fix the application's layout with the sole use
of CSS. A common example is when you use a ListView component to list items. In a view mode that
is large enough, it is convenient opting for a multicolumn layout. When the application is snapped,
instead, it is advisable that you switch to a single column layout. Because the ListView is a Windows 8
component, you need some JavaScript code to switch its layout accordingly. This can't be done from
within a CSS file; an event handler is then the only possible approach. By using events, you can also
programmatically replace all (or in part) the layout of the application by selecting a different layout
for each significant view state. (You'll have an exercise that addresses this in just a moment.)
Important The bottom line is that CSS media queries should be your first option; and you
should turn to events if CSS media queries are not enough. Having said that, though, it's
really hard to find a non-toy application that can manage view states without resorting
(at some point) to events.