Database

Mitra uses percentages to define the height, width, and x and y positions of components instead of fixed pixels. This allows elements to automatically adapt to the screen size but may cause issues in components such as labels and buttons. In particular, the internal content of these components, like font size, needs to be adjusted to ensure proper display across different resolutions.

A common example is a label designed on an HD screen that, when viewed on a lower-resolution screen, may display text disproportionate to the rest of the content. To address this, Mitra offers the minimum pixel size functionality, which prevents the font size of labels and buttons from shrinking below a certain threshold, ensuring the readability of the internal text.

On the other hand, components such as tables and boards have fonts that maintain their pixel size natively, avoiding the issue of excessive text shrinkage.

To simplify the development of responsive screens, Mitra includes a tool that allows developers to temporarily change the resolution in the Page Builder during development mode. This helps developers visualize how their interfaces behave on different devices and screen sizes.

2. Best Practices for Building Responsive Screens in Mitra

Define Minimum Pixel Size: Use the minimum pixel size functionality for labels and buttons to ensure text readability across different resolutions.

Test with Different Resolutions: Use the resolution adjustment tool in the Page Builder to check how the interface adapts to different screen sizes.

Develop for Mobile: For screens intended for mobile devices, use the Page Builder Mobile to prioritize vertical layouts and ensure an optimized user experience.