The whole.point of clamp is to define a minimum size (mobile) and a maximum size (desktop) and whatever is in-between scales based on the viewport width. To check what the font size is you can look.in devtools on the "computed" section where if you resize the browser you'll see the font size chane. Does that answer your question?
I have extensively used clamp() in recent projects not only for fronts but for others properties as well. It was confusing to set viewport whether to 5vw, 10 vw , 50vw i had to repeatedly change & check dev tools , so that exact value according to mockup should be matched. What viewport size should be used to compare ?
I would say to set your viewport width to be based on this
Calc(max-font-size / container-width * 100vw)
Then when the browser size is the container width, the font size will be set at the maximum size. As the screen goes smaller it will shrink until it reaches the minimum value.
How to know what would be size of font at specific view port ? Lets say 480, 720, 1080, 1400 and in between
The whole.point of clamp is to define a minimum size (mobile) and a maximum size (desktop) and whatever is in-between scales based on the viewport width. To check what the font size is you can look.in devtools on the "computed" section where if you resize the browser you'll see the font size chane. Does that answer your question?
I have extensively used clamp() in recent projects not only for fronts but for others properties as well. It was confusing to set viewport whether to 5vw, 10 vw , 50vw i had to repeatedly change & check dev tools , so that exact value according to mockup should be matched. What viewport size should be used to compare ?
I would say to set your viewport width to be based on this
Calc(max-font-size / container-width * 100vw)
Then when the browser size is the container width, the font size will be set at the maximum size. As the screen goes smaller it will shrink until it reaches the minimum value.
Alright, Thanks 🙌