I tried here.
Font size didn’t changed. I didn’t understand. Can you explain?
I tried here.
Most browsers ship with the default font size set to
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.
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 ?
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:
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
rem for example.