Domina 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 matemáticas 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.

Presentación de las 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.

Puede usar este ejemplo simple de CodePen para ayudarlo a seguir la guía.

CSS calc () Función matemática

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

Esta función admite suma (+), multiplicación

resta (-) y división (/) con un solo operador.

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

diagrama que muestra espacios de diferentes tamaños en una página web

APROVECHA EL VIDEO DEL DÍA

width: calc(100vw - 400px);

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

diagrama que muestra css calc crea espacios del mismo tamaño

CSS max () Función matemática

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: limitar la altura de la barra de navegación

diagrama que muestra el grosor de la barra de navegación en diferentes dispositivos

Esto puede hacer que el valor de una propiedad sea excelente en computadoras de escritorio y malo en dispositivos móviles, tal como se muestra en 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.

height: max(10vh, 80px);

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

diagrama que muestra las barras de navegación a la misma altura

CSS min () Función matemática

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

diagrama que muestra texto que es demasiado grande en dispositivos móviles Utilizar una tamaño de fuente: 10vh;

Las propiedades del texto del encabezado principal en nuestro ejemplo hacen que el texto se vea muy bien en el escritorio, pero demasiado grande en el móvil.

font-size: min(10vh, 10vw);

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

diagrama que muestra texto del tamaño correcto

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

Las funciones matemáticas preempaquetadas con CSS ofrecen una forma única de producir fácilmente sitios web receptivos. Solo tienes que configurarlos correctamente para empezar.

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

Leer siguiente