CSS font size relative to parent

Question

Is there a CSS size element in CSS that allows me to define dimensions relative to the parent element,

vwand vh, for example, refer to the width and height of the viewport, respectively.

I want parental relative size for responsive design. Say, for example, my parent element is 400pxwide, I want my text to be half this width, but I'm not sure if I can specify this, or even if such a function will be widely supported.

Answer 1

Just use the font size value em instead of px or pt. For example, if you have a div with a width and height of 400 pixels, use the font size: XXem (where xx is a numeric value). In addition, you can also include% in your font size.

Answer 2

In this case, you should use the em value for the children.

One em (1em) is equal to the current font size. So, for example, if the parent element has a font size of 16px than 1em, it is 16px, 2em is 32px and so on ...