CODEWITHSUNDEEP
csstextresizemedia-queries
user2860857
user2860857

Reputation: 559

text automatically resizes without media queries (responsive design)

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.

Upvotes: 2

Views: 6548

Answers (2)

ASHUTOSH UPADHYAY
ASHUTOSH UPADHYAY

Reputation: 1

Instead of px use Rem, here are few scales to use instead of px:

px rem
1 px 0.0625 rem
2 px 0.125 rem
3 px 0.1875 rem
4 px 0.25 rem
... ...
9 px 0.5625 rem
10 px 0.625 rem
11 px 0.6875 rem
12 px 0.75 rem
13 px 0.8125 rem

for more refer to https://www.pixelconverter.com/pixel-to-rem-converter/

Upvotes: -2

hugo der hungrige
hugo der hungrige

Reputation: 12912

  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/

Upvotes: 5

Related Questions