Responsive Design Elements
Responsive Design elements provide a dynamic layout and visibility mechanisms for Logi reports on a variety of devices.
The following topics discuss use of the Responsive Design elements:
About Responsive Design
Responsive web design has the goal of creating pages that provide an optimal viewing experience, including easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices (from mobile phones to desktop computer monitors).
In a Logi application, this is accomplished using Responsive Design elements. They dynamically adapt the report layout to the viewing environment by using fluid, proportion-based grids and controlled visibility. When these elements are used, viewport sizes are automatically determined using CSS3 media queries and are standardized in Logi apps as the following:
| Device | Width | Attribute Name |
|---|---|---|
| Extra small devices: phones | < 768 pixels | Extra Small Screen |
| Small devices: tablets | ≥ 768 pixels | Small Screen |
| Medium devices: desktops | ≥ 992 pixels | Medium Screen |
| Large devices: desktops | ≥ 1200 pixels | Large Screen |