Tamaño de fuente responsivo en CSS

Creé un sitio usando la cuadrícula Zurb Foundation 3 . Cada página tiene un gran h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Expandir fragmento

Cuando cambio el tamaño del navegador al tamaño móvil, la fuente grande no se ajusta y hace que el navegador incluya un desplazamiento horizontal para acomodar el texto grande.

He notado que en la página de ejemplo de tipografía de Zurb Foundation 3 , los encabezados se adaptan al navegador a medida que se comprime y expande.

¿Me estoy perdiendo algo realmente obvio? ¿Cómo logro esto?

Mar 27 '13 06:03 user2213682

Puede utilizar el valor de la ventana gráfica en lugar de ems, pxs o pts:

1vw = 1% del ancho de la ventana gráfica

1vh = 1% de la altura de la ventana gráfica

1vmin = 1vw o 1vh, el que sea menor

1vmax = 1vw o 1vh, el que sea mayor

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

De CSS-Tricks: tipografía del tamaño de una ventana gráfica

May 06 '2013 01:05 Desolator

No font-sizeresponderán así al cambiar el tamaño de la ventana del navegador. En cambio, responden a la configuración de zoom/tamaño de letra del navegador, como si presiona Ctrly +juntos en el teclado mientras está en el navegador.

Preguntas de los medios

Tendría que considerar el uso de consultas de medios para reducir el tamaño de fuente en ciertos intervalos en los que comienza a romper su diseño y crear barras de desplazamiento.

Por ejemplo, intente agregar esto dentro de su CSS en la parte inferior, cambiando el ancho de 320 píxeles donde su diseño comience a romperse:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Longitudes porcentuales de la ventana gráfica

También puede utilizar longitudes porcentuales de ventana gráfica como vw, y . El documento oficial del W3C para esto dice:vhvminvmax

Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se escalan en consecuencia.

Nuevamente, a partir del mismo documento del W3C, cada unidad individual se puede definir de la siguiente manera:

unidad vw: igual al 1% del ancho del bloque contenedor inicial.

unidad vh: igual al 1% de la altura del bloque contenedor inicial.

unidad vmin: igual al menor entre vw o vh.

Unidad vmax: igual al mayor entre vw o vh.

Y se usan exactamente de la misma manera que cualquier otro valor CSS:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

La compatibilidad es relativamente buena como se puede ver aquí . Sin embargo, algunas versiones de Internet Explorer y Edge no son compatibles con vmax. Además, iOS 6 y 7 tienen un problema con la unidad vh, que se solucionó en iOS 8.

Mar 26 '2013 23:03 Peter Featherstone

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

Aquí clamptiene 3 argumentos.

El primero es el tamaño de fuente mínimo permitido.
El tercero es el tamaño de fuente máximo permitido.
El segundo argumento es el tamaño de fuente que desea tener siempre. Su unidad debe ser relativa (vw, vh, ch) y no absoluta (es decir, no px, mm, pt). La unidad relativa hará que cambie su tamaño con los tamaños de pantalla cambiantes.

Considere un ejemplo : considere que hay un icono de fuente grande y espectacular cuyo tamaño desea cambiar de tamaño dinámicamente (icono responsivo)

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

Aquí 80vw es el tamaño de fuente preferido.
15 rem es el tamaño de fuente mínimo (límite inferior).
80vh es el tamaño de fuente máximo (límite superior).

es decir

si en un tamaño de pantalla móvil en particular, 80vw <15rem, entonces el tamaño de fuente es 15rem.
Si la pantalla es demasiado ancha, entonces si 80vw > 80vh, el tamaño de fuente es 80vh.

Los métodos sugeridos arriba por la gente siempre tienen un resultado un poco incierto... como cuando usamos vwsolo, el tamaño de fuente a veces puede ser demasiado grande o demasiado pequeño (ilimitado).

@mediaSe pueden usar consultas, pero debe usar un mínimo de 3 consultas de medios para que el tamaño de fuente responda

Jul 09 '2020 06:07 ashuvssut