Aprende a controlar el tamaño de los elementos, mantener el espaciado adecuado e implementar tipografía fluida con estas funciones de CSS compatibles.
A medida que el diseño adaptable se vuelve más matizado, CSS evoluciona constantemente para brindar
los autores aumentaron el control. La min()
,
max()
y
funciones clamp()
,
compatibles con todos los navegadores modernos, se encuentran entre las herramientas más recientes para crear
crear sitios web y aplicaciones más dinámicos y responsivos. Puedes usar estas
para controlar el tamaño y el cambio de tamaño de los elementos, mantener el espaciado
y crear una tipografía flexible y fluida.
Las funciones matemáticas,
Valores y unidades de CSS nivel 4calc()
,min()
,max()
yclamp()
permiten usar expresiones matemáticas con suma (+), resta (-), multiplicación (*) y división (/) como valores de componentes
Navegadores compatibles
min()
max()
clamp()
Uso
Puedes usar min()
, max()
y clamp()
en el lado derecho de cualquier CSS.
expresión en la que tendría sentido. Para min()
y max()
, debes proporcionar un
de valores de una lista de valores y el navegador determina
más pequeña o más grande. Por ejemplo, en el caso de width: min(1rem, 50%, 10vw)
,
el navegador calcula cuál de estas unidades relativas es la más pequeña y utiliza
ese valor para el ancho del elemento.
La función max()
hace lo mismo para el valor máximo.
Para usar clamp()
, ingrese tres valores: un valor mínimo y un valor ideal para
y un valor máximo.
Puedes usar estas funciones en cualquier lugar donde un objeto <length>
, <frequency>
,
Se permite <angle>
, <time>
, <percentage>
, <number>
o <integer>
. Tú
pueden usarlas por su cuenta (como en font-size: max(0.5vw, 50%, 2rem)
), con
calc()
(como en font-size: max(calc(0.5vw - 1em), 2rem)
) o compuesta (como en
font-size: max(min(0.5vw, 1em), 2rem)
).
Los siguientes son algunos ejemplos de cómo usar estas funciones.
El ancho perfecto
Según los elementos de tipografía Estilo por Robert Bringhurst, "cualquier contenido de 45 a 75 caracteres se considera ampliamente longitud de línea satisfactoria para una página de una sola columna configurada en un formato de texto con serif en un tamaño de texto.
Para asegurarte de que tus bloques de texto tengan entre 45 y 75 caracteres de ancho, utiliza
clamp()
y ch
(avance de caracteres de ancho 0)
unidad:
p {
width: clamp(45ch, 50%, 75ch);
}
Esto le permite al navegador determinar el ancho del párrafo. Establece el ancho en
50% de forma predeterminada. Si el 50% es menor que 45ch
, usa 45ch
como ancho.
en su lugar, y si el 50% es más ancho que 75ch
, usa 75ch
.
También puedes dividirlo solo con min()
o max()
. Si quieres
que el elemento siempre tenga un ancho de 50%
y no supere los 75ch
de ancho en dispositivos de
pantallas, usa width: min(75ch, 50%);
para establecer el tamaño máximo.
De la misma manera, puedes establecer un tamaño mínimo para texto legible con el elemento max()
como en width: max(45ch, 50%);
. Aquí, el navegador selecciona
es mayor, lo que significa que el elemento debe ser 45ch
o más ancho.
Administra el padding
También puedes usar max()
para establecer un tamaño mínimo de padding. Este ejemplo proviene de
Trucos para CSS,
donde el lector Caluã de Lacerda Pataca compartió esta idea: “Dejar que un elemento tenga
padding adicional en tamaños de pantalla más grandes, pero mantén un padding mínimo en pantallas más pequeñas
tamaños de pantalla. Para ello, usa calc()
o max()
y resta el valor mínimo
padding desde ambos lados del elemento: calc((100vw - var(--contentWidth)) / 2)
,
o max(2rem, 50vw - var(--contentWidth) / 2)
. En tu hoja de estilo, debería
verse así:
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Tipografía fluida
Para habilitar la tipografía fluida,
Mike Riethmeuller popularizó una técnica
que usa la función clamp()
para establecer un tamaño de fuente mínimo, uno máximo
y permitir el escalamiento entre esos tamaños.
Antes de que clamp(),
diseñara el escalamiento de fuente, se requerían cadenas de estilo complejas. Ahora,
puedes dejar que el navegador haga el trabajo por ti. Cómo establecer la fuente mínima aceptable
Tamaño (por ejemplo, 1.5rem
para un título), tamaño máximo (como 3rem
) y
el tamaño ideal (como 5vw
). Ahora tienes una tipografía que se ajusta a la escala de la página
ancho del viewport hasta que alcance los valores mínimos y máximos limitantes, con
muy poco código:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Más recursos
- Unidades y valores de CSS en MDN
- Especificaciones de unidades y valores CSS de nivel 4
- Artículo de trucos de CSS sobre el ancho de los elementos internos
- min(), max(), clamp() Descripción general de Ahmad Shadeed
Imagen de portada de @yer_a_wizard en Salpicaduras.