Get best of the week

Fuente receptiva. Adaptar texto entre diseño y valores mínimos

La fuente receptiva o receptiva es el sueño de cualquier desarrollador web. Revisé muchas opciones para la implementación, me senté por la noche y encontré una opción de trabajo confiable. Quiero compartirlo contigo. Bono SCSS Mixin!


Entonces el desafío. Indique el valor de acuerdo con el diseño, así como el valor mínimo en el que el texto o el título se vería bien en dispositivos móviles, por ejemplo, iPhone 5 (320px). En este caso, la fuente se adaptaría, aumentando o disminuyendo dependiendo del ancho de la pantalla.

Tomamos los valores iniciales del diseño, por ejemplo, el encabezado H1 con un tamaño de 40px. También necesitamos el ancho de todo el diseño del lienzo, por ejemplo, 1280px.



Para obtener el valor mínimo de fuente, creamos el encabezado de acuerdo con el diseño y, usando las herramientas de desarrollador de Chrome (F12), seleccionamos el tamaño mínimo de pantalla deseado y seleccionamos el tamaño de fuente, cambiando el valor hasta que el texto se vea adecuado. Obtuve 24px



después de eso en CSS, en lugar de tamaño de fuente: 40px; escribe lo siguiente.

font-size: calc(24px + 16 * (100vw / 1280));

Donde 24px es nuestra fuente mínima, 16 es la diferencia entre la fuente en el diseño 40 y la fuente mínima en 24 (40-24 = 16). 100vw es el ancho actual completo de la ventana gráfica (pantalla); 1280 es el ancho del diseño.

Probamos y obtenemos una fuente receptiva que coincide totalmente con el tamaño del diseño.

Pero, con un tamaño de 320 px, no veremos el resultado deseado, es decir, una fuente de 24 px. Esto se debe al hecho de que no especificamos el tamaño mínimo de pantalla en exactamente 320px.



Para resolver la situación, escribimos una solicitud de medios para 767px, y dentro cambiamos la fórmula:

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

Aquí restamos 320 px del ancho completo de la ventana gráfica, y al número adicional 16 agregamos otro 70% (16 + 16 * 0.7). ¡

Verificamos y vemos el cumplimiento total de la tarea! Al mismo tiempo, la transición al punto de ruptura se realiza sin problemas y de manera notable.

Por supuesto, podemos cerrar todo esto en la mezcla SCSS:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$addMobSize: $addSize + $addSize * 0.7;
	@media (max-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
	}
	@media (min-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
	}
}

Y conecta de la siguiente manera:

h1{
 @include adaptiv-font(40, 24);
}


Puede deshacerse por completo de la consulta de medios:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$maxWidth: $maxWidth - 320;
	font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

Estaré encantado de leer en los comentarios cómo se puede mejorar esta solución. ¡Gracias por la atención!

Basado en materiales del video " Fuente adaptativa. Un ejemplo de la implementación de una fuente receptiva (goma) en CSS + SCSS mixin " En el canal de YouTube " Freelancer for Life "

More articles:


All Articles