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

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?

Answer 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.

Answer 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.