text automatically resizes without media queries (

2019-08-01 09:27发布

问题:

Is there a way to have a text automatically resized , depending on browser or screen or text's container? (not depending on device, because is not a good practice).

And without the help of CSS 3 media queries! It would be awesome not to use media queries because the code will be less and usally you have to use fallbacking for older browsers to understand media queries.

I know there is a way for setting a relative size, but how about a size that will auto-resize? I tried font-size:auto; and font-size:120% but if I stretch down my browser's window the size is the same

Thanks in advance

回答1:

(1) You can use vw and vh which resize relatively to the viewport:

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

http://css-tricks.com/viewport-sized-typography/

(2) You can use JavaScript: e.g: http://fittextjs.com/