Yendo directo al código, aquí hay una implementación funcional:
html ( font-size: 16px; ) @media screen and (min-width: 320px) ( html ( font-size: calc(16px + 6 * ((100vw - 320px) / 680)); ) ) @media screen and (min-width: 1000px) ( html ( font-size: 22px; ) )Vale la pena mirar nuestra publicación más reciente Simplified Fluid Typography para obtener un tamaño de letra práctico, sujeto y basado en la ventana gráfica.
Eso font-sizeescalaría desde un mínimo de 16 px (en una ventana de 320 px) hasta un máximo de 22 px (en una ventana de 1000 px). Aquí hay una demostración de eso, pero como Sass @mixin (que cubriremos más adelante).
Consulte el ejemplo de base de lápiz de tipo fluido w Sass de Chris Coyier (@chriscoyier) en CodePen.
Sass se usó solo para hacer que esa salida sea un poco más fácil de generar, y el hecho de que hay una pizca de matemáticas involucrada. Vamos a ver.
Usando unidades de ventana gráfica y calc(), podemos hacer que el tamaño de fuente (y otras propiedades) ajuste su tamaño en función del tamaño de la pantalla. Entonces, en lugar de tener siempre el mismo tamaño o saltar de un tamaño a otro en las consultas de medios, el tamaño puede ser fluido.
Aquí están las matemáticas, crédito Mike Riethmuller:
body ( font-size: calc((minimum size) + ((maximum size) - (minimum size)) * ((100vw - (minimum viewport width)) / ((maximum viewport width) - (minimum viewport width)))); )La razón por la que las matemáticas son un poco complicadas es que estamos tratando de evitar que el tipo sea más pequeño que nuestro mínimo o más grande que nuestro máximo, lo cual es muy fácil de hacer con las unidades de visualización.
Por ejemplo, si queremos nuestro tamaño de fuente en un rango donde 14pxes el tamaño mínimo en el ancho de ventana más pequeño 300pxy donde 26pxes el tamaño máximo en el ancho de ventana más grande 1600px, entonces nuestra ecuación se ve así:
body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )
Vea el Pen JEVevK de CSS-Tricks (@ css-tricks) en CodePen.
Para bloquear esos tamaños mínimos y máximos, es útil usar esta matemática en las consultas de medios. Aquí hay algo de Sass para ayudar ...
En Sass
Podrías hacer una mezcla (bastante robusta), como esta:
@function strip-unit($value) ( @return $value / ($value * 0 + 1); ) @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) ( $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 ( & ( font-size: $min-font-size; @media screen and (min-width: $min-vw) ( font-size: calc(#($min-font-size) + #(strip-unit($max-font-size - $min-font-size)) * ((100vw - #($min-vw)) / #(strip-unit($max-vw - $min-vw)))); ) @media screen and (min-width: $max-vw) ( font-size: $max-font-size; ) ) ) )Que usas así:
$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px; html ( @include fluid-type($min_width, $max_width, $min_font, $max_font); )Aquí hay otro de los ejemplos de Mike, conseguir un ritmo fluido perfecto:
Ampliación de la idea a los encabezados con escala modular
Escala modular, es decir, cuanto más espacio disponible, más dramático es el tamaño diferente. Quizás en la ventana gráfica más grande con, cada encabezado en la jerarquía es 1.4 veces más grande que el siguiente, pero en el más pequeño, solo 1.05x.
Ver vista:
“Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ robado de @MikeRiethmuller ahora en vivo en los blogs de @CodePen. Incluyendo "¡Escala modular fluida!" pic.twitter.com/0yJk8Iq8fR
- Chris Coyier (@chriscoyier) 27 de octubre de 2016
Con nuestro mixin Sass, se ve así:
$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h2 ( font-size: $mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h3 ( font-size: $mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font); )Otra lectura
- Tipografía flexible con bloqueos CSS de Tim Brown
- Obtenga el equilibrio correcto: texto de visualización receptivo de Richard Rutter
- Ejemplos de tipos de fluidos por Mike Riethmuller