CSS - What is best to use for this case (px, %, vw, wh or em)?

Question

I am using Ionic 2 for the development of an app and I need to preview the app in different sizes.

Currently, I am using vw in all the sizes including font-size, padding and so on, but when resizing the font it sometimes becomes a bit small and even sometimes the text is not readable.

For that reason, I would like to know what is best to use in this case:

• px
• %
• vw
• wh
• em

Or do I need to use also the @media and support different font sizes?

Any thoughts?

Solution 1

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.

Solution 2

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.

Comments

[G-Cyrillus]

you may use @media and vh / vw, so you can avoid vw / vh to be too small or too big and let them work in between your safe breaking points where you can use either rem, em, px, pt, cm, ... ;)

[dippas]

Possible duplicate of which unit i should use in CSS, while designing web page

[dippas]

W3schools it is really not a good reference

[G-Cyrillus]

you have also cm, pt (more for print purpose i agree), mind that vh, vw do not care about the scrollbars being there or not ;)

[Ariel Weinberger]

@GCyrillus I could mention all of them, but I chose to only talk about the specific ones that the OP asked about :)

[G-Cyrillus]

it gives him more to learn about ;)

[Ariel Weinberger]

@GCyrillus Correct, and after reading your commend I also edited and added a source to see all units available.

[G-Cyrillus]

i saw this and upvoted :)

[Suamere]

W3Schools is a very good reference

[cobrexus]

@Suamere we use MDN now :p

[Abhishek Agarwal]

The point about pixels is incorrect. pixel is not equal to physical pixel, but 1 css pixel. Which is dependent upon window.devicePixelRatio (This setting matters especially for mobiles). Search for css pixels vs physical pixels

[Aeiddius]

duality of man.