How to adjust font size based on screen size?

Question

I was given a figma design of a webpage. The figma page width was 1825px. The width of my laptop is 1080px. Suppose a text in figma page has font-size 20px. How do I convert it in my laptop so that the ratio is maintained?
I can't use percentage because I'm using flex box. And when I try using percentage what it does is takes percentage of its parent container rather than the entire body.

Answer 1

See, 20px will be 20px, it doesn't matter what the screen size is.

20px in a 1080px screen is as big as 20px in a 1825px screen.

If you want that the ratio of the 20px text to the 1825px screen to be constant, i.e. if the screen size reduces, then the text size decreases as well then you can do what Coding Kitty has rightly mentioned. Use percentages.

Answer 2

DoMan hmmm

In CSS, this is the only method that I know.

You can use JS for a responsive webpage.

var x = screen.width;

var y = (x * 20)/1825

y will be the text size
Then use DOM to define the styling of the text and set text size as y

This is basically doing the same thing as percentages.

Maybe it'll work.

You can give it a try.

Answer 3

use percentages instead of pixels for the ratio.

Answer 4

VATSAL SHARMA My first intention was using percentage only. Like I said I'm using flexbox too and when I'm using percentage it's becoming really tiny.

Answer 5

VATSAL SHARMA one can use vw also. I tried that but the pixels were getting distorted.