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 ...
Get Mastering OpenLayers 3 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.
