No puedo entender cómo hacer que el texto se comporte como una imagen cuando se cambia de tamaño. Cuando cambio el tamaño del navegador, el texto permanece tan grande como al principio y comienza a dividirse en muchas filas. Traté de experimentar con el tamaño de fuente de VW, pero en ese caso, el texto era demasiado grande en la pantalla grande y demasiado pequeño en la pequeña.

Están mis clases de CSS:

.text_head_container{
  font-size: 35px;
  font-size: 2.1875rem;
  color: white;
  width:60%;
  display:inline-block;

}    
.img_head_container{
  display:inline-block;
  width:15%;
  height:auto;
}

Estaré agradecido por cualquier ayuda con esto.

Saludos.

4
KamCho 23 sep. 2016 a las 20:24

3 respuestas

La mejor respuesta

Sospecho que las consultas de medios son la única opción razonable aquí:

p {
  font-size: 5vw;
}

@media screen and (max-width: 600px) {
  p {
    font-size: 30px;
  }
}
3
c-smile 23 sep. 2016 a las 17:45

CSS no ofrece fácilmente las facilidades que necesita para hacer que el tamaño de la fuente se escale de manera no lineal con el tamaño del navegador. vw es lo más cercano a lo que se va a acercar simplemente, y si siente que es demasiado grande en una pantalla grande y demasiado pequeño en una pantalla pequeña, tendrá que levantar un poco.

Lo que le recomendaría que hiciera es comenzar por averiguar cuáles son los tamaños correctos cada 800px desde 600px hasta 2k, luego nuevamente en 3k y 4k, y encontrar una función que se ajuste a la curva que construya. Algo como "a 800px quiero 26px, a 1000px quiero 29px", etc., debería ser todo lo que necesita. Entonces, cualquier ajuste de curva aleatorio debería poder proporcionarle la función correspondiente.

Una vez que tienes esa función, tienes, básicamente, dos opciones.

  1. Implemente su curva con calc() (no siempre es posible y pierde muchos resguardos del navegador)
  2. Haga una gran lista de consultas de medios con pequeños pasos y fuentes definidas entre ellos (generables, pero ... ew)
  3. Escuche el evento de cambio de tamaño del documento y reasigne el tamaño de fuente a continuación (ya sea directamente o sobrescribiendo alguna regla CSS-DOM, la última de las cuales es lo que hacen la mayoría de los complementos para esto)

Aquí hay una implementación simple de escuchar el evento de cambio de tamaño del documento.

1
John Haugeland 23 sep. 2016 a las 17:59

Dijiste que ya habías probado vw. ¿Lo has probado de esta manera? Texto adaptable Configuré vmin y vmax en el texto. De esta manera, no irá por debajo del vw mínimo que establezca, ni debería superar la altura máxima, y ​​todavía responde completamente.

.resize{
  font-size: 35px;
  font-size: 6vmax;
  font-size; 1vmin;
  width:60%;
  display:inline-block;

}    
.text{
  display:inline-block;
  width:100%;
  height:auto;
}
<div class="resize">
  <p class="text"> Just some random text, Just some random text,  Just some random text, Just some random text,  Just some random text, Just some random text, Just some random text, Just some random text, </p>
</div>
2
Ricky 23 sep. 2016 a las 17:44