I am developing only business web applications like CRM’s stuff etc.
In my old projects I always used “px” as CSS units because this is what I can grep and understand easily.
My apps are not used on mobile devices by now so it doesn’t matter, but I now will start some new project from scratch and so I thought it’s time to switch to something more modern.
But at the end I do not know what of all this million of different units are the right ones?
Maybe I need different units for font sizes and div sizes?
Let’s assume I have a single page application with a header on the top, a footer on the bottom, which are fix in content. Should I maybe use “vw” to have these always relative in size to the display size of the device? I don’t think this makes much sense or?
What is the advantage of “em”? If it is relative to the font size, I can also do something like this:
The benefit to using em/rem is that is sets the variable size based on the base font size that the user has set. Regardless of If the user sets their base size to 14px, 16px, or 20px, the 1em size is going to be the font-size that they are comfortable looking at. No zooming, pinching, whatever.
The difference between em and rem is how the relative size is set. em sets it’s size based on the size of the parent container and rem sets it size off the root (base font size). I personally use rem 99.999% of the time so I don’t have to do cumulative math
I’m sure Paul has better guidance, but I typically use
rem for font sizing (body is typically set as font-size: 100%)
vw or % for container widths (I’ll set min-heights OR max-heights if I set a height)
I don’t believe there is just one unit for everything. I tend to use different units for different things.
I mainly use em for any elements that are text based (some prefer rem for this). This means they react and respond to any change in font size by the user.
For image based content I generally use px, which hopefully makes sense.
Then there are the proportional units like %, vw, vh, etc, which may come in for special cases as required.
You may still be coming across vastly varying screen sizes and as already mentioned, users can zoom the page or the text at will. So I still think a good level of fluid responsiveness should be considered.
For any element containing text (and most others too) I would let height take care of itself, though you may in some cases want a min-height.
I think the others have already mostly answered this but I’d like to add that my preferred approach is to use rem rather than em or px when sizing elements.
The compounding feature of em is more of a headache than a cure and although it makes sense it ultimately makes things harder.
Percentages are useful also ( except for vertical measurements as that is a minefield to avoid).
I tend to use px for padding and margin rather than percent as I don’t like my padding to grow and shrink with the screen size. Although that sounds like what you would want it seldom looks good in practice. You can of course use rem padding instead of px for the same effect and get a better scale if font size is changed. However I still tend to use px for padding as I don’t really want it to change. That’s just a personal observation of mine and others disagree.
VW units are actually a pain for sizing elements as they include the scrollbar so you can’t really work out the space for your content. The vw unit can be useful for font sizing though and you can create a flexible font size (using clamp) based on the width available.
VH units are useful for specifying height based on the viewport height which by can only be done in percentage if there is an unbroken chain of elements back to root all with a height defined.
However there is a bug in most mobiles where viewport height changes when address bars and footers slide in and out and a height:100vh ends up taller than the visible viewport and obscures a sticky footer.
I use media queries with px and there is a good argument to use rem instead but to be honest I like the simplicity of px media queries and seldom have an issue with them.
For physical things like images I would use px or percent when I want them to scale.
With grid and flex box you can basically size without using those units at all and have flexible containers instead.
Font size: rem (for users with poor eyesight who enlarge text).
Margins top and bottom: pixels (for sufficient fixed visual spacing).
Margins of boxes and images left and right: percent (so they are automatically small on small smartphones where screen width available is at a considerable premium).
Margins of text left and right: pixels (for fixed visual indentation).
Basic width of Flexbox boxes: pixels (so rows of boxes wrap to avoid boxes becoming narrower than desirable)
Maximum width of Flexbox boxes: pixels (so lines of text within boxes do not become too long on large screens)
Border widths and corner radii: pixels (for visual appearance).
Maximum page width: pixels (used if desired to limit width of website on large screens.
The ‘margins’ above could be achieved by use of padding.
My choice of units is partly based on my web pages being fully responsive by using Flexbox, without using media queries or CSS Grid.
except just to say I find 12px (0.75rem) too small as a base font.