min(), max() y clamp() para valores fluidos
Limite los valores entre mínimos y máximos mediante min(), max() y la forma abreviada clamp().
min(), max() y clamp() para valores fluidos es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Por qué utilizar funciones de comparación?
Las funciones de comparación de CSS (min(), max(), clamp()) permiten crear tamaños adaptables al contexto sin media queries, de forma más elegante y concisa que los enfoques basados en breakpoints.
min() — Elegir el menor
min(a, b, ...) evalúa todos los argumentos y utiliza el menor. Aquí, «mínimo» se refiere al resultado visual, es decir, a la opción más limitada.
<div class="container">Container</div>max() — Elegir el mayor
max(a, b, ...) elige el valor mayor, lo que garantiza que siempre se alcance un límite mínimo.
<p>Responsive text</p>clamp(min, preferred, max)
clamp() restringe un valor dentro de un intervalo. El valor preferido (el argumento central) suele ser fluido. Los valores mínimo y máximo proporcionan límites absolutos.
<h1>Clamped Heading</h1>Escala tipográfica fluida con clamp()
Reemplace múltiples sobrescrituras de breakpoints por un solo clamp() para cada nivel de encabezado:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>Espaciado fluido con clamp()
Aplique tamaños fluidos también a padding, margin y gap: una técnica clave para el diseño «intrínseco»:
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>min() como límite de ancho
El patrón de contenedor más sencillo: siempre ocupa el 90 % del viewport, pero nunca supera los 1200 px, mediante una sola expresión:
<div class="wrapper">Wrapper</div>max() para el tamaño mínimo de fuente
Asegúrese de que el texto del cuerpo nunca sea demasiado pequeño en viewports reducidos:
<p class="text-body">Body text that never gets too small.</p>Anidamiento de min/max/clamp
Estas funciones pueden anidarse para expresar restricciones complejas:
<div class="element">Padded element</div>Funciones de comparación en Grid
Utilice min() dentro de minmax() para establecer un límite inferior más seguro para las columnas:
<div class="grid"><div>Card</div></div>Compatibilidad con navegadores
Las tres funciones de comparación son totalmente compatibles con los navegadores modernos (Chrome 79+, Firefox 75+, Safari 11.1+). No necesitan prefijos de proveedor.
Comprobación rápida
Un encabezado utiliza font-size: clamp(1rem, 3vw, 2.5rem). ¿Con qué ancho de viewport 3vw equivale a 1rem (suponiendo una raíz de 16 px)?
Resumen
min() elige el valor menor (límite superior). max() elige el mayor (límite inferior). clamp(min, preferred, max) limita un valor fluido. Juntas, estas funciones permiten crear tipografías y espaciados fluidos sin media queries. El patrón más potente es clamp(1.5rem, 4vw, 3rem) para crear encabezados automáticamente adaptables.
Preguntas frecuentes
¿La lección «min(), max() y clamp() para valores fluidos» es gratis?
Sí — el texto completo de «min(), max() y clamp() para valores fluidos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «min(), max() y clamp() para valores fluidos»?
Limite los valores entre mínimos y máximos mediante min(), max() y la forma abreviada clamp(). Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «min(), max() y clamp() para valores fluidos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- calc() para cálculos dinámicos
- min(), max() y clamp() para valores fluidos
- repeat() y minmax() en Grid
- color-mix() y sintaxis de color relativa