javascript - How to get text within div to be relative to the div's width and height, CSS, HTML -

i'm trying text within div relative size of div, when zoom in text gets bigger along div, , when zoom out text gets smaller along div. example, if hit ctr , - @ same time on stackoverflow, , zoom out 25%, can see text shrinks along div, way 25%, oppose text shrinking or div shrinking - shrink @ same time. i'm trying of effect. thanks.

div { width: 50%; height: 50%; font-size: 12%; }  <div> text </div> 

try em based font-size show below relative.

please check working example here.

body {     font-size: 16px;  /* declare base font-size. */ }  div { width: 50%; height: 50%; font-size: 1em; }