MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

320-pixels-wide space.
The general practice is to place all your full-screen landscape rules at the top of your CSS file and
then make specific adjustments within the specific media queries. We did this with Here My Am! in
Chapter 2, where the default styles worked for fullscreen-landscape and filled as-is, so we needed
specific rules only for snapped and fullscreen-portrait.
Tip When styling your app in Blend, there’s a visual affordance in the Style Rules pane that lets you
control the exact insertion point of any new CSS styles in the given stylesheet. With this—the orange
line shown in the graphic below and shown in Video 2-2 of the companion content—you can indicate
where to insert styles for specific media queries and within that media query:
In a few cases, handling media queries in declarative CSS alone won’t be sufficient. When the primary
content display on a page is a horizontally panning ListView with GridLayout, you typically switch that
control over to ListLayout in snapped view. You might also, as suggested on Guidelines for snapped and
fill views, change a list of buttons to a single drop-down select element to offer the same functionality
through a more compact UI. Such things require a little bit of JavaScript.
For these purposes you can employ the standard Media Query Listener API in JavaScript. This
interface (part of the W3C CSSOM View Module, see http://dev.w3.org/csswg/cssom-view/) allows you
to add handlers for media query state changes. To listen for the snapped state, for instance, you can use
code like this:
246