Las funciones min() y max() en CSS te permiten controlar tamaños de forma fluida sin recurrir a media queries. Son ideales para quienes diseñan interfaces responsive y quieren reemplazar reglas rígidas por valores adaptativos que respondan al viewport.

Si ya conoces clamp(), estas dos funciones son sus parientes cercanas, pero con una lógica distinta: en lugar de tres valores (mínimo, máximo y preferido), trabajan con solo dos y eligen entre ellos según el contexto.

¿Qué hace la función min en CSS?

La función min() recibe dos valores y aplica el menor de los dos en cada momento. Suena simple, pero su comportamiento puede sorprenderte.

Imagina una caja con este estilo:

css .caja { width: min(500px, 50vw); }

Aquí el navegador compara 500 píxeles contra el 50% del viewport width y se queda con el más pequeño. En una pantalla grande, 500px será menor que el 50% del viewport, así que la caja medirá 500px. Pero al achicar la ventana, el 50vw se vuelve más pequeño y toma el control.

¿Para qué sirve min() en CSS? Para fijar un tamaño máximo flexible. La caja nunca crecerá más allá del menor valor disponible entre los que le pases.

¿Cómo funciona max y por qué se siente contraintuitivo?

La función max() hace lo opuesto: elige el mayor de los dos valores. Y aquí viene lo interesante, porque su uso real puede confundirte al principio.

Mira este ejemplo aplicado a un párrafo con la clase fuente:

css .fuente { font-size: max(20px, 3vw); }

En una pantalla amplia, 3vw es más grande que 20px, así que la letra se ve enorme. Pero al reducir la ventana, llega un punto donde 3vw es menor a 20px, y entonces el texto se ancla en esos 20 píxeles como tamaño mínimo.

¿Cuándo usar max() en lugar de min()? Usa max() cuando quieras garantizar un tamaño mínimo absoluto. Aunque suene raro, max() establece el piso, no el techo.

Esta es la parte que se siente psicológicamente contraintuitiva: usas max para fijar un valor mínimo posible, y usas min para fijar un valor máximo posible. La lógica está en cómo se comparan los dos valores, no en el nombre de la función.

¿Por qué min y max reemplazan media queries?

Ambas funciones actúan como un ancla dentro de tu hoja de estilos. En lugar de escribir reglas separadas para distintos breakpoints, defines un comportamiento fluido que respeta límites.

Algunas ventajas concretas frente a los media queries tradicionales:

• Reduces líneas de código al evitar bloques @media repetidos.
• Tipografías y contenedores escalan de forma continua, no en saltos.
• El navegador hace el cálculo en tiempo real según el viewport.

En el caso de la caja con min(500px, 50vw), se ancla en un tamaño máximo entre los dos mínimos disponibles. En el caso de la fuente con max(20px, 3vw), se ancla en un tamaño mínimo entre los dos máximos. Una vez que lo pruebas en pantalla y mueves la ventana, la mecánica se vuelve mucho más clara.

¿Ya estás usando min() y max() en tus proyectos o sigues confiando en media queries? Cuéntame en los comentarios cómo las estás aplicando.