Clever Geek Handbook

Should I use vh or vw for font size?

I am interested in using css new vh / vw for different sized screens.

But I'm wondering if I should be using vh or vw for the font.

<div style='font-size:10vh'>This is a test</div>

or

<div style='font-size:10vw'>This is a test</div>

Indeed, I would like to use both. It's like you are resizing an image in photoshop.

NOTE. I tried using vmin, but that's not good either. The font changes depending on the size of the window. So sometimes it wraps around, sometimes it doesn't. I would like to find a way to scale. The same way you scale the image. For example, when you rescale an image in Photoshop it won't change the wrapping / positioning of the font. This will simply make the font wider or taller, depending on the size of the scale (no aspect ratio restrictions). What I am looking for.

enter image description here

here is another (with a slightly wider window). Note: inside a box that also uses vh / vw for height / width.

enter image description here

+3


source to share


1 answer


vmin

is a viewport unit (although support with a bug in IE <= 9: http://caniuse.com/#search=viewport ) that automatically sets itself to the smaller of vh

and vw

. So if the window is taller than its width, vmin

acts like vw

. If the window is wider than tall, vmin

-vh

EDIT:



I see you didn't think it scales correctly, but this example seems to work: http://jsfiddle.net/dtvz5mty/ if you still don't like it trying to replace vmin

with vw

in the example and it works

0


source






More articles:


All Articles