CSS - What is best to use for this case (px, %, vw

Question

I am using Ionic2 for the development of an app, I am in a step in which I need to preview the app in different sizes. Currently I am using vw in all the sizes, font-size, padding, etc... but when resizing the font sometimes become a bit small and even sometimes the text tend to be not readable; for that, I would like to know what is the best to use in this case either (px, %, vw, wh or em).

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

Any thoughts?

Answer 1

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.

Answer 2

this is probably gonna get closed, but I love using the em units because they are very scale-able, esp in mobile browsers that being said, I do use media queries along with them. I really depends on what youre doing.

A good site will probably compose of a few ems and a few pxs ratio, so what ever your end goal is will should dictate which you'll use,

if you understand each ones application youll be able to end up with which one you like more. W3Schools and W3code both have good articles on them...

Answer 3

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.