Hello, I’m confused about using viewport units and would love some help.
I’ve gone through the tutorial on viewport sizing and it says "Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm "
So if I set 1vw for my text, what does it mean? Each letter in my text is 0.5cm? Or does it mean that the width of my entire text paragraph is 0.5cm?
1vw means 1% of the viewport width, that is, 1% of the browser window size, so 100vw means the full width of the window. If you set 1vw for a paragraph tag or other container tag, it will try to fit text into a rather narrow column of 1% of the browser width, but won’t affect the size of the text in there, so the text will remain its normal size and word-wrap at the boundaries of the container.
On the other hand, if you set font-size to a viewport unit, it will in fact scale to the size of the viewport, though most browsers do enforce a minimum size for text.
The best technique to understand this is to just try it out in something like codepen and see the effects for yourself.
Thank you so much for your clear explanation!! It makes it so much easier for me to understand now!!