-1

I put the div which can change the size by %.

In this case in upper square, font size is OK.

but lowwer square font looks smaller.

Is there any good practice to adjst the font size according to the div size??

<div style="width:100px;height:100px;">
<div style="background-color:grey;width:100%;height:100%;">
<p>5</p>
</div>


<div style="width:100px;height:100px;">
<div style="background-color:grey;width:200%;height:200%;">
<p>5</p>
</div>
</div>
whitebear
  • 11,200
  • 24
  • 114
  • 237
  • 1
    Does this answer your question? [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) – vadivel a Mar 06 '20 at 05:34
  • You can check this https://dzone.com/articles/css-relative-font-size – Manash Kumar Mar 06 '20 at 05:36
  • I tried `font-size: 100%` but it just depends on the browser default(16), I want to change relatively to the div wrapper. – whitebear Mar 06 '20 at 05:38

1 Answers1

0

you can change font size in div this way font-size: 150%;

<div style="width:100px;height:100px;">
<div style="background-color:grey;width:100%;height:100%;">
<p>5</p>
</div>


<div style="width:100px;height:100px;">
<div style="background-color:grey;width:200%;height:200%; font-size: 150%;">
<p>5</p>
</div>
</div>
kavinda
  • 77
  • 8