html - numeros - span redondo css

Cómo implementar un tamaño de letra fluido usando CSS puro

Question

Tengo texto envuelto en <div> s, y me gustaría hacer que todo fluya, incluido el tamaño de fuente del texto, es decir, el texto se redimensiona a sí mismo en respuesta al tamaño del elemento que lo contiene.

Me encontré con una solución Javasript + CSS , pero me pregunto si es posible hacerlo con CSS puro.

Answer 1

Respuesta corta

No puede tener tamaños de fuente fluidos, pero lo estará cuando las longitudes de porcentaje de vista estén ampliamente disponibles.

Respuesta larga

Tienes que entender estos dos términos: responsivo y fluido .

Responsive significa que usted hace que su hoja de estilo responda de manera diferente a diferentes tamaños de ventana. Esto se hace usando CSS Media Queries . Si bien responsive es una de las palabras más populares en diseño web, en su mayoría significa codificación de CSS para diferentes longitudes absolutas hasta que te mueres de aburrimiento.

Fluido significa que trabajas con unidades de longitud relativa, como porcentajes. Cuando trabajas con unidades de longitud relativa, cada tamaño se calcula automáticamente.

Ejemplo

Digamos que tienes un <div> dentro del cuerpo del documento y quieres que llene la mitad de la ventana.

La solución de respuesta es la siguiente:

@media (max-width: 1px) {
  body > div {
    width: 0.5px;
  }
}

@media (max-width: 2px) {
  body > div {
    width: 1px;
  }
}

@media (max-width: 3px) {
  body > div {
    width: 1.5px;
  }
}

@media (max-width: 4px) {
  body > div {
    width: 2px;
  }
}

/* Repeat until you reach gigabytes and hit operating systems'' file size limitations. */

Y la solución fluida :

body > div {
  width: 50%;
}

¿Asi que?

Lo que nos limita hoy es que no hay un amplio soporte para las unidades de longitud relativa a la vista. Lo que puede hacer es descartar toda la idea de "tamaños de fuente fluidos de CSS puro" y responder .

Answer 2

Mientras que Jim te ha dado información precisa, se aleja de la pregunta ligeramente hecha. El diseño responsivo (consultas @media) puede alterar el texto de acuerdo con el tamaño de la pantalla. Por lo que entiendo, me preguntaba si existe una solución CSS pura para el tamaño del texto fluido (cambio continuo del tamaño del texto durante los cambios de tamaño de la ventana).

Aquí hay un enlace a la explicación de css-tricks de las nuevas técnicas de tamaño de fuente . Tenga en cuenta que esto es nuevo y que los navegadores más antiguos probablemente tendrán algunos problemas, y que incluso los más nuevos (Chrome + Safari) todavía no están libres de errores.

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

Editar código añadido

Answer 3

Sí, mira las consultas de medios de CSS 3. Puede proporcionar diferentes reglas de estilo según el ancho de la ventana gráfica. Esto incluye alterar el tamaño de la fuente.

Answer 4

use calc con consulta de medios para una fuente sensible y fluida

@media screen and (min-width: 25em){
  div {  
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
  }
}