Mastering OpenLayers 3

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 ...