Handling a view state

There are two ways to cater for a snapped view: by using the CSS3 media queries or by using the JavaScript layout change events, and sometimes both. We use media queries for changes in layout that can be tackled using CSS-like element sizes, element display (inline, block), and element visibility. By using CSS media queries, it becomes very easy to define different styles that will be applied depending on the view state of the app. You can use a separate media query for each view state you have, or you can apply the same set of styles to multiple view states by combining more than one media query. The following code shows the syntax for a media query that matches the different view states; the first one matches the snapped view state and the second matches a combination of view states.

@media screen and (-ms-view-state: snapped) {
}
@media screen and (-ms-view-state: fullscreen-landscape), 
  screen and (-ms-view-state: fullscreen-portrait), 
  screen and (-ms-view-state...