Introducing media queries

Your Windows 8 app should have a fluid and responsive UI, as the same app will be downloaded and opened either on a tablet, a PC with a large monitor, or a phone. Your app should adapt to the different view states (full screen portrait or landscape, filled or snapped) and display accordingly. It should look good and function well when the users flip the screen between portrait and landscape, when they zoom, when they snap the app, and so on. Too much stuff to look out for, you might say? Worry not, because if you are developing using a JavaScript app, the answer to all your concerns is CSS Media Queries!

By using CSS media queries, you can manage the changes to the layout by easily defining different styles to apply to the HTML elements in your app, depending on the view state and size of the current media. You can use a separate media query to tailor for each view state, or you can combine media queries to apply the same set of styles to multiple view states. The...