Which unit's width should I reference to and what unit should I use for responsive design? (Not adaptive design)

Question

Right now I am dealing with a project that requires me to use responsive design instead of adaptive design(i.e. No media-quires; everything changes fluidly), and I am not sure which unit should I use for padding and margin.

For font-size, I am using rem, which I believe is a good choice for responsive design, as I only needs to change the font-size for html to control their scale of change.

But for padding and margin, each unit comes with its drawback, at least in my opinion.

px

Hardcoding pixel is not an option here.

rem

To me, it does not make sense for padding and margin of containers to scale with font-size, but this is the easiest unit to use for responsive design.

vw

If I use vw, padding and margin of containers will scale with viewport width. This unit make sense to me, but I don't want to get the proportion of a unit relative to the viewport by writing calc( marginWidth/viewportWidth * 100vw) everywhere. Is there a better way of writing and achieve the same result?

%

If I use %, padding and margin of containers will scale with parent's width. Again, I will have to do calc( marginWidth/viewportWidth * 100%). This is really cumbersome.

Is there a better way to set padding and margin for responsive css design? Would using CSS processor like tailwind css, postCSS or Sass help tackle this problem? Any opinion is welcomed.

Answer 1

This question has been asked a lot and everyone does it differently. You can use px,%,em,rem,vw,vh. All of those except for px are relative units. It depends on the project but I do find it best to use px & percentages for most because you know they won't be messed up by varying viewports. Using vh and vw for padding and margins can really poorly affect accessibility in terms of how your page zooms.

I'd suggest trying out a few different approaches or combinations of both because there's not one right answer.