Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 7 CREATING RESPONSIVE WEB APPSResponding to Screen SizeMedia queries are a useful way of tailoring CSS styles to the capabilities of the device. Perhaps the mostimportant characteristic of a device from the perspective of a responsive web app is screen size, whichCSS media queries address very well. As Figure 7-2 shows, the CheeseLux logo takes up a lot of space ona small screen, and I can use a CSS media query to ensure that it is shown only on larger displays. Listing7-2 shows a simple media query that I added to the styles.css file.Listing 7-2. A Simple Media Query@media screen AND (max-width:500px) {*.largeScreenOnly {display: none;}}• Tip Opera Mobile aggressively caches CSS and JavaScript files. When experimenting with media queries, thebest technique is to define the CSS and script code in the main HTML document and move it to external files whenyou are happy with the result. Otherwise, you will need to clear the cache (or restart the emulator) to ensure yourchanges are applied.The @media tag tells the browser that this is a media query. I have specified that the largeScreenOnlystyle contained in this query should be applied only if the device is a screen (as opposed to a projector orprinted material) and the width is no greater than 500 pixels.• Tip In this chapter, I am going to divide the world into two categories of displays. Small displays will be thosewhose width is no greater than 500 pixels, and large displays will be everything else. This is simple and arbitrary,and you may need to devise more categories to get the effect you require for your web app. I am going to ignorethe height of the display entirely. My simple categories will keep the examples in this chapter manageable, albeitat the cost of granularity.If these conditions are met, then a style is defined that sets the CSS display property for any elementassigned to the largeScreenOnly class to none, which hides the element from view. With the addition tothe style sheet, I can ensure that the CheeseLux logo is shown only on large displays by applying thelargeScreenOnly class to my markup, as shown in Listing 7-3.173www.it-ebooks.info