![]() Here we can see that the template has three different Screen Rules. To tell the browser when to use which template, we define Screen Rules in the JavaScript file in the root folder of the template ( responsive.js). In this example there is a file big.html for big screens, for example the screen of a desktop computer, a medium.html file for medium sized screens, like a tablet computer and a small.html file for small screens like those of smartphones. The only difference here is that we have more than one HTML file, one for each layout in our template. So how can we create a responsive template for our app? If we look at the file structure of a “responsive” template, we can see that it is similar to a normal template: ![]() This helps to deal with limited space on smaller screen sizes like mobile devices. As a screen designer you can use the two different orientations to provide different functionality with each orientation (portrait or landscape). As the template system is dynamic, meaning Screen Rules are checked during the whole runtime of map.apps, it is also possible to react on events like screen rotation. This gives you the possibility to create one single app with several layouts that can be delivered dependent on the user’s device, screen size or other so-called "Screen Rules". Since map.apps 2.1 it is possible to divide a template into several layouts. for these sections are defined within a map.apps theme. Within a template, it is possible to define a footer or header section above/ below the map, for example, whereas colors, font properties etc. This article is not about app-templates but about templates that define the rough arrangement of map.apps components within the application. You can also modify the width of your browser to see the layout changes. Run the demo app on a desktop PC, tablet and/or mobile phone to see how the device will affect the layout of map.apps. ![]() It describes an approach to create websites and web-applications that adapt their layout to the given limitations of the requesting display devices.īefore diving into technical details, try it yourself. Responsive design has become a more and more trending topic.
0 Comments
Leave a Reply. |