I cant see any differencies px, em, rem or vh. Why?

I tried here.
Font size didn’t changed. I didn’t understand. Can you explain?

Most browsers ship with the default font size set to 16px. So 3em and 3rem are usually going to be 48px. And since you set the first one to 45px then the three of them will look almost the same size (but I can tell with my eyes only that the first one is a little smaller than the other two).

I am seeing a big difference for 3vh but it definitely depends on the current height of your browser since vh units are a percentage of the height. So try changing the height of your browser to see how that font changes.

1 Like

Yes, i can see that little diffirience between them. they are named responsive units but when i change the browser window the font size doesn’t chaning (but when i gave % or vw to a div it’s size chaning). I want to by automaticly change their font size when window size chanced . Seems like i have to use @media query, It is ?

em and rem units don’t change when the browser size changes. rem units are based on the default font size set in the browser and em units are based on the font-size inherited by the element (which is basically the font size of the parent).

If you want the font size to change based on the view port size then you need to use the view port units: vh and vw (and there are a few others but these are the main two).

And yes, you could also add media queries in there as well. At narrow widths you could use a smaller font size based on em or rem for example.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.