Stop 09 · Mobile & Responsive DesignTopics · 7/8

Designing for Multiple Screen Sizes

In short

There isn't one 'mobile' size. There are small phones, huge phones, foldables, tablets held upright or sideways, and screens with notches. Designing for three perfect frames isn't enough.

Beyond breakpoints — accounting for the huge range of actual device sizes, aspect ratios, and pixel densities in the real world, not just 3 idealized viewport widths.

The jaadu holds up a stretchy kurta next to friends of different heights and sizes.

Think of it like this

A free-size kurta that actually fits

A tailor-made kurta fits one person perfectly. A smart free-size design uses drawstrings, side slits and stretchable fabric so it works for many body types. Your layout needs those drawstrings for all the screen shapes out there.

Watch it happen

Ways screens differ

Screens differ

Width

Pixel density

Aspect ratio

Orientation

Foldables

1/4Width: from small budget phones to wide tablets. Layouts must stretch smoothly across all of them.

The big ideas

What you need to know

Points, not pixels

Design in points or dp, which scale with density. A 16pt font looks similar on sharp and normal screens.

Sharp images everywhere

Use SVG for icons and export raster images at multiple resolutions so nothing looks blurry.

Test the extremes

Check the smallest and largest likely screens, not just the middle. Problems hide at the edges.

Big text settings

Many users increase font size. Check your layout with larger system text turned on.

See it in code

Walk through the code

css

1h1 {2  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);3}4 5.hero {6  min-height: 100svh;7  padding-inline: max(16px, env(safe-area-inset-left));8}

1/3clamp() sets a minimum, a fluid middle and a maximum, so headings scale smoothly between sizes.

Fluid type that scales with screen width, plus a hero section that respects small viewport height and notch safe areas.

Save yourself the pain

Common mistakes

Oops

Designing only on the latest flagship phone size.

Do this instead

Many users have smaller or older phones. Test on a small width like 360px too.

Oops

Assuming everyone uses default font size.

Do this instead

Test with larger system text. Text should wrap, not get cut off.

Your mission

Device stress test

~25 min

Quick check

Why export icons as SVG instead of a single small PNG?

Go deeper

1Test a design on 2-3 genuinely different device sizes (not just a browser resize).
2Learn why designing for a few fixed sizes and letting flexible layout fill the gaps is more robust.
3Identify a real design that breaks on an unusual screen size or aspect ratio.