If someone can advise on the best approach for designing an APP for different screen sizes?
Should this be handled In the CSS, or can it be done in any alternative way?
Some smaller screens cause my app to scroll up and down. I would prefer if elements become smaller for those screen sizes so that users can see all elements without scrolling.
Is there a certain practice of designing the HTML elements for various Android, Ios, tablets and browsers screens?
Tailwind is not a plugin in the traditional sense, but it is a utility-first CSS framework that can be used with various front-end technologies, such as HTML, React, Vue, and Angular. To use Tailwind, you need to include its CSS file in your project and then apply its utility classes to your HTML elements.
+1 for TailwindCSS! I am using it as well. With Tailwind, you use prefixes to apply different classes/styles at different breakpoints (screen sizes) - Responsive Design - Tailwind CSS.
For sure. You can override Tailwind’s default screen sizes with your own. I actually did that myself. I overrode them with Ionic’s default breakpoints.
Typically it’s best to determine a CSS layout ‘architecture’ and pattern first and then be consistent with it. For instance, what type of styling enforcements will you use? Stylelint, prettier, eslint, etc? Will you base your application responsiveness off of the view height/width (%), or off of the font-size (REM)? I typically recommend either VH/VW or REM over media queries because it allows you to reduce a ton of unnecessarily repeated code.
Here’s some links that might be helpful that I would recommend: