html how to adapt the font size of a text inside a div to its dimensions?
Good Morning. I have a container that occupies 50% in width and height, inside this I have a paragraph, when re-sizing the div (redeeming the browser window) it takes its percentages ofaccord to the size of the window, so if I give the paragraph font a fixed size it overflows in some window sizes.what property, properties, or library should I use to fix this issue?. In advance thank you.
2 answers
Based on what I read in the question I'm going to assume that the container always occupies 50% of the viewport's height/width.
In that order the easiest way would be to use the unit of Measure vw (viewport width), in which each unit equals one point in % of the width of the visible area:
.container {
border: solid 1px blue;
width: 50%;
}
p {
font-size: 3vw;
}<div class="container">
<p>
¡Hola mundo!
</p>
</div>In this example we assign a font size of 3% of the width of the viewport, so it will adapt to any screen resolution, from proportional form.
There are more advanced techniques with calc () and vw units of measure, but I think they are not within what is being asked.
To adapt styles to dimensions you should evaluate implementing media queries
As you will see you can define styles that will apply according to the dimensions of the screen
@media (min-width: 700px) { ... }
In the ... you define the style you want it to apply when the minimum is 700px, this is a simple example but can put together more complex Things