Home/ Questions/Q 9134097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:36:04+00:00

Is there a way to set font-size dynamically change on browser resize with css

  • 0

Is there a way to set font-size dynamically change on browser resize with css?

I have breakpoints setted with media queries. At the first breakpoint, font size is, lets say 1em. On the other breakpoint, text enlarges to 2em.

Font resize only happens on the breakpoint. I’m loking for the effect you achieve when you set a cointainer width to percentages (it resizes automatically when you resize the browser.)

Is there a way to make the text enlarge from one breakpoint to the other dynamically without using javascript?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to change the font size onresize depending on the window size, you need to bind a javascript handler to the window resize event. If you just want to animate between two states, you can use CSS3 animations, f.ex:

    -webkit-transition:font-size 1s ease-out;

    http://jsbin.com/uyitut/1

    This example uses a button for trigger just to demo the transition, but you could add multiple media queries instead. Here is a rather awkward example of one mq per 100px: http://jsbin.com/uyitut/5 but it kinda works.

    • 0