Buen día. Tengo un contenedor que ocupa el 50% a lo ancho y a lo alto, dentro de este tengo un párrafo, al re-dimensionar el div (redimesionando la ventana del navegador) el toma sus porcentajes deacuerdo al tamaño de la ventana, por lo que si le doy a la fuente del parrafo un tamaño fijo se desborda en algunos tamaños de ventana.¿que propiedad, propiedades o libreria debo usar para arreglar este problema?. De antemano gracias.
2 respuestas
Según lo que leo en la pregunta voy a asumir que el contenedor ocupa siempre el 50% del alto/ancho del viewport.
En ese orden de ideas lo más fácil sería utilizar la unidad de medida vw
(viewport width), en la cual cada unidad equivale a un punto en % del ancho de la zona visible:
.container {
border: solid 1px blue;
width: 50%;
}
p {
font-size: 3vw;
}
<div class="container">
<p>
¡Hola mundo!
</p>
</div>
En este ejemplo le asignamos un tamaño a la fuente de 3% del ancho del viewport, de tal forma se adaptará a cualquier resolución de pantalla, de forma proporcional.
Hay técnicas más avanzadas con calc() y las unidades de medida vw, pero creo que no están dentro de lo que se pregunta.
Para adaptar los estilos a las dimensiones deberias evaluar implementar media queries
como observaras puedes definir estilos que aplicaran segun las dimensiones de la pantalla
@media (min-width: 700px) { ... }
en los ... defines el estilo que quieres que aplique cuando el minimo sea de 700px, esto es un ejemplo simple pero puede armar cosas mas complejas