CSS - What is best to use for this case (px, %, vw, wh or em)?
Note that I only mentioned the ones you asked about.
Here you can see the full list of CSS measurement units: CSS Units in W3Schools
Rather than telling you which one is the "right one", I would rather want you to understand what each one actually is.
Pixels (px
): Absolute pixels. So for example, 20px
will be literally 20 pixels on any screen. If a monitor is of 1980x1200, and you set an element's height to 200px
, the element will take 200 pixels out of that.
Percentage (%
): Relative to the parent value.
So for this example:
<div style="width: 200px;">
<div style="width: 50%;"></div>
</div>
The inner div will have a width of 100 pixels.
Viewport height/width (vw
/vh
): Size relative to the viewport (browser window, basically).
Example:
.myDiv {
width: 100vw;
height: 100vh;
background-color: red;
}
Will make an cover the whole browser in red. This is very common among flexboxes as it's naturally responsive.
Emeters (em
) and Root Emeters (rem
): em
is relative to the parent element's font size. rem
will be relative to the html
font-size (mostly 16 pixels). This is very useful if you want to keep an "in mind relativity of sizes" over your project, and not using variables by pre-processors like Sass and Less. Just easier and more intuitive, I guess.
Example:
.myDiv {
font-size: 0.5rem;
}
Font size will be 8 pixels.
Now that you know, choose the right one for the right purpose.
w3schools.com has a pretty nice summary about css units.
I for myself do always use em. Why?
First of all, em is relative to your font-size
. So as w3school says, 2em
would be 2 times of the font-size
you've defined in your parent container. So you may define a specific font-size
for your html
tag and use whatever em you want, to handle relative font-sizes
for various tasks.
Also, em is covered in mostly all browsers.
At least, you may use @media-queries
to handle responsive font-size
handling for mobile devices. So you may consider using @media-queries
combined with a relative font-size
by using em.