Screen Size, HTML and CSS

Ionic Framework Ionic Angular
1

Hi

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?

2

Responsive design is mostly created via css. You can use for example css media querys to detect screen sizes and apply different styles.

I normally use Tailwind in every project. With that it is even simplier to apply styles based on breakpoints.

1 Like
3

So tailwind looks interesting.

Are there any examples that show how to handle multiple screen types?

Is tailwind an additional library/plugin we need to install or is this CSS generator?

4

From Chat GPT:

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.

About screens: Customizing Screens - Tailwind CSS

5

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

6

Great, It would be pretty difficult to do this for each variation of the screen size, but can you segment this as
Mobile: small,medium large.

Tablet: small,medium large.

I am trying to look for a universal method but with some flexibility.

7

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.

My Tailwind config:

theme: {
    screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
    },
}

Just like with any responsive design, you cannot design for every possible screen size. You have to generalize and use buckets (like you laid out).

8

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:

Hope this helps @aardra !

9

I use a slightly different method

This should detect the screen size in Angular. From there you can use ngStyle or *ngIf it all the way to apply styles to the what the screen needs.