Best styling units to use for a responsive site

Kirby 2 Solved ✅
1

Hi, I know this question isn’t Kirby specific, but seeing I’ve been spending alot of time here and you’ve been very helpful, thought maybe you could advise.
If I want my site to be responsive - display well on all devices, what are the recommended units to use in styles? Obviously “px” is a poor choice 'cause there’s no connection with the screen size, but what about “%”, “em” or “vh & vw” or other units that are related to the display area?
Thanks for any help
David

2

I always go for Rem units. These are much easier to work with then Em units and still maintain responsiveness. Units like vh and wv are kind of oddballs - i would use these for specific use cases like making a big bold hero banner fill the viewport. The problem with Em units is they are hard to calculate and things quickly become a mess. If you set the body to 1em which means 16px, then set a child element to 2em, meaning 32px, any child element of those children will see 1em as 32px not 16, because you just reset it. This does not happen with Rem units.

If your using stuff like SASS or Less you can use those to do the math. Heres how i do it in my framework, which is based on some work by Pierre Burel.

Play with this gist on SassMeister.

3

I usually use rem for font-sizes/margins/padding; em for breakpoints and viewport units for other stuff, especially when controlling the height of elements. But there are deviations from that scheme. Viewport units are now widely supported by browsers. The important thing is to learn how these different units work and then to use them how it best fits a given use case.

1 Like
4

Thanks for this, very helpful.
James haven’t had a chance to check your links yet, but do you use Rem units for everything fonts, layouts, view ports etc.

5

I use a mix. I use a grid system that uses percentages and negative margins to place columns correctly, which is my own fairly heavily modified version of the Profound Grid. For pretty much everything else, I used Rem’s. For fonts i use a custom font engine i wrote that uses modular scale and can either output in pixels or rem units, or both.