Choosing px, %, or rem for Mobile Layouts: When and Why?

Many developers ask which unit—%, rem, or px—is best for mobile redesigns. The short answer: depending on the situation, all three are used, with px being the most common.

Two main problems arise when dealing with various viewport sizes: uncertain width and uncertain height.

Uncertain Width

Common mobile widths are 360px, 375px, 414px, and a smaller 320px.

Text generally looks the same across devices, so using px for font sizes works fine. The only visual differences are line breaks and truncation, which rarely break the layout.

Therefore, for text, px is perfectly acceptable.

Images fall into two categories: percentage‑based and fixed size. Percentage images (e.g., full‑screen banners) must fill the width, while fixed‑size images (e.g., avatars) use px.

Thus, images may use % or px depending on the scenario (vw can also be used).

When only width is uncertain, rem is not necessary.

Rem can still be useful as a vw alternative; see “Various Implementations of Mobile Percentage Widths”.

Uncertain Height

Height is often ignored because scrolling handles it, but when content must fit a single screen, height matters.

Designs usually target iPhone 6 (667px height). To adapt to a 480px screen, media queries are employed.

Example screenshots show iPhone 4 and iPhone 6 layouts after scaling images and text.

Can rem solve this? If text uses px and images use %, the problem is already solved without rem.

Switching everything to rem would require adjusting both font‑size and image scaling via media queries, which becomes complex.

The core issue is media queries, not rem; px and % are often simpler.

In summary, rem is not a universal solution for mobile units. Traditional units like px and % remain reliable, and newer units such as vw and vh are also worth considering.