5

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 2

7

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.

1
  • muchas gracias, tu respuesta soluciono el problema
    – devjav
    Commented el 17 ago. 2016 a las 19:26
1

Para adaptar los estilos a las dimensiones deberias evaluar implementar media queries

CSS media queries

CSS3 Media Queries - Examples

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.