Responsive styling with CSS
In the first example, called ch08_css, we will create the layout of our application. We differentiate three styling methods. If the device is a desktop computer, we use regular styling, as in Chapter 2, Applying Custom Styles. If we come through a touch screen device, though, we use different rules for controls. Furthermore, we apply a slightly different style to the application in portrait mode than in landscape mode.
Firstly, we create the required elements in the HTML file in our example:
<body>
<div id="map" class="map">
<div id="toolbar" class="toolbar"></div>
</div>
</body>This part is more simple than ever before. However, in this case, we create our toolbar inside the map element. We will discuss the importance of this step later in this chapter.
Writing the style sheet
Now that we have our HTML elements in place, let's head to the CSS file in this example. As you can see, we completely removed the map container...
