What are the differences between the units of font sizes "vw", "in" and "%"?

The units mentioned have similar uses, but with quite different utilities, I will say some things that Iron Man has said, however, I will give a more detailed detail:

vw, vh, vmin, vmax

In addition to vm , there are these other units, the most important thing you should know about them is their compatibility , which is not the best, but are already gaining considerable space.

vw , as has been said by our friend Iron Man, establishes a percentage relation with the Viewport Width , whereas vh quite intuitively refers to Viewport Height . In addition to being used for "quadrilateral" elements (imgs, divs, etc.), they can also be applied in texts, for font-size . This allows you to dynamically fit the font to the size of the window. Look at this JsFiddle with an example.

Since the vmin and vmax are related to the minimum or maximum value of the widths and heights, depending on which is the smallest and the largest. For example, if the browser has a width of 1000px and a height of 800px, 1vmin would be 8px and 1vmax would be 10px. But if it was scaled to 800px wide and 1000px high, although both width and height were inverted, vmin and vmax remain the same.

in, rem

The em unit, as is already known by many, is mostly used for texts.

A situation for em : You gave html and body a font-size: 20px (this default has 16px), so all child elements will consequently have 20px . However, you also assigned a <p> a font-size: 1.4em . What does that mean? It means that this p has a font size equal to 1.4 times the fontSize that inherited from its parent element, in the case , it was the body, that is, 1.4 * 20px = 28px . >

Situation for rem : imagine yourself in the previous situation ... The paragraph that had font-size: 1.4em (28px) has now been inserted into div with font-size: 30px . The current calculation should be 1.4 * 30 = 48 (30px of the parent element). But if I want it to inherit from the root element? Since this is the html (can also be the body ) (with font-size: 20px ), I just need to give the paragraph a font-size of, instead of 1.4em , 1.4rem with% with%. The calculation will re-inherit from rem (root-element).

Percentage%

There is not much to say about the percentage, this takes into account the parent element, and will also vary according to some body property, such as css .

As with position the percentage can also be applied in texts. For example, if the parent element of a vw has a <p> , and that font-size: 40px has a p , its font size will be double the parent element font size, in this case, 80px.

In short, you will not get better when it comes to responsiveness, it depends on your application, its design and navigation. Read more about this topic and choose taking into account what you think is best. Analyze the examples above and associate them with your experiences, so you can judge.

And in my opinion, good breakpoints of the Medias Queries still give us the expense when we talk about source and responsiveness.

I hope you have helped ...

The vw unit uses the width of the viewport or browser as a measure basis, with 1vw equivalent to 1/100 of the browser width. For example if the width of the browser is 900px, 1vw is equal to 9px. It is used for both layout measures and fonts. The % unit is used more to define the layout of page elements, so they react according to the size of the viewport. And em is normally used for fonts, but it can also be used to define some layout details as the margin of elements. For example, if you want the element to have a margin of 2x the relative font size, you can use margin:2em; .