Dominar el diseño web receptivo con funciones matemáticas CSS

Las matemáticas son buenas, las matemáticas son geniales, pero ¿quieres pasar tu tiempo haciendo cálculos cuando tu hoja de estilo puede hacerlo por ti?

CSS viene con tres prácticas funciones matemáticas que cambiarán la forma en que diseñas tus sitios web. Te mostraremos cómo y por qué deberías usarlos.

Introducción de Matemáticas a CSS

CSS es principalmente declarativo, pero las revisiones han introducido funciones en el lenguaje. Ahora hay muchas funciones en la especificación, y tres de las matemáticas más simples pueden resultar muy útiles: calc, max y min.

Puedes usar este sencillo ejemplo de CodePen para ayudar a seguir junto con la guía.

Función matemática CSS calc()

La función CSS calc() realiza un cálculo simple y usa el resultado como un valor de propiedad. Esto significa que puede asignar valores dinámicos a propiedades como alto y ancho, todo sin Consultas CSS @media.

Esta función admite sumas (+), multiplicaciones (*), restas (-) y divisiones (/) con un solo operador.

Ejemplo: creación de espacios uniformes en tamaños de pantalla

Hacer que una página web se vea igual en diferentes tamaños puede ser difícil, incluso si usa unidades CSS dinámicas como vw y %. La función CSS calc() cambia esto.

Como puede ver en la imagen de arriba, la barra de título que cruza la pantalla tiene un espacio diferente según el tamaño de la pantalla. Esto se debe a que hemos establecido el ancho en 80vw y el espaciado en 20vw; un valor variable.

Si usamos calc() en su lugar, podemos configurar el espacio para que sea el mismo en cualquier tamaño de pantalla. La propiedad que usamos para esto se ve así:

ancho: calc (100vw - 400px);

Esto establece el ancho de nuestra barra de título en 400 px menos que el ancho de la página, creando un espacio uniforme sin importar el tamaño de la pantalla.

Función matemática CSS max()

La función CSS max() selecciona el valor más alto de un grupo para agregar un valor a una propiedad CSS. Puede agregar tantos valores potenciales como desee, cada uno separado por una coma, pero solo usará el más alto.

Ejemplo: Restricción de la altura de la barra de navegación

Uno de los desafíos clave que vienen con el diseño web receptivo es la orientación. Un sitio que funciona en un monitor de computadora vertical grande también debe verse bien en una pantalla móvil vertical más pequeña.

Esto puede hacer que el valor de una propiedad se vea bien en el escritorio y mal en el móvil, tal como muestra la imagen de arriba. Nuestra barra de navegación tiene una altura establecida de 10vh, pero esto hace que la barra se vea delgada en los dispositivos de escritorio.

Podemos usar la función CSS max() para resolver este problema:

altura: máx. (10vh, 80px);

Al agregar una regla como esta, podemos establecer una altura mínima de 80px para nuestra barra de navegación, mientras mantenemos el valor de 10vh si es más alto.

Función matemática CSS min()

La función min() es como la función max(), pero elige el valor más bajo de un grupo para usarlo como valor de propiedad.

Ejemplo: establecer un tamaño de texto máximo

Ya sea que use un valor dinámico o no, obtener el tamaño del texto correcto en todas las plataformas puede ser complicado. Podemos usar la función min() de CSS para establecer dos o más valores de propiedades potenciales para el tamaño del texto de nuestro encabezado principal, y usará el más pequeño.

Usando un tamaño de fuente: 10vh; La propiedad en el texto del encabezado principal en nuestro ejemplo hace que el texto se vea genial en el escritorio, pero demasiado grande en los dispositivos móviles.

Para cambiar esto, puede usar la función CSS min() para proporcionar un tamaño alternativo:

tamaño de fuente: min (10vh, 10vw);

Este ejemplo funciona porque las pantallas móviles son altas y delgadas, mientras que los monitores de escritorio son anchos y cortos. Esto significa que la unidad de ancho de vista (vw) es más pequeña en dispositivos móviles que en computadoras de escritorio.

Uso de las matemáticas para el diseño web receptivo

Las funciones matemáticas que vienen preempaquetadas con CSS ofrecen una forma única de producir sitios web receptivos con facilidad. Solo necesita configurarlos correctamente para comenzar.

Por supuesto, hay otros métodos y funciones CSS que puede usar para crear un sitio que se vea genial en todas las plataformas.

Cómo construir una barra de navegación receptiva usando HTML y CSS

Leer siguiente

Sobre el Autor