Using CSS Media Queries
You can take advantage of media queries in conjunction with Cascading Style Sheets to adapt to different app sizes automatically. You can use media queries to detect the characteristics of a device and modify the presentation of content.
Note
Media queries is a W3C recommendation. You can use media queries not only with Windows Store apps, but also with normal websites. Media queries are supported by Google Chrome 4+, Mozilla Firefox 3.5+, Apple Safari 4+, and Microsoft Internet Explorer 9+.
Imagine, for example, that you want to display different content depending on the horizontal resolution of a device. In that case, you can group styles by using the @media rule.
For example, the HTML page in Listing 11.2 contains ...
Get Windows® 8.1 Apps with HTML5 and JavaScript Unleashed now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
