Funciones Min, Max y Clamp
Utilice min(), max() y clamp() para crear tamaños adaptables a las dimensiones del contenedor o de la ventana gráfica.
Funciones Min, Max y Clamp es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 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 de CSS?
Las funciones de comparación de CSS permiten expresar un tamaño condicional sin JavaScript: «utilice este tamaño, pero nunca uno menor o mayor que estos límites». Son fundamentales para el diseño moderno fluido y adaptable.
Función min()
min() devuelve el valor más pequeño de una lista de valores separados por comas. El navegador elige el valor que sea menor en el tamaño actual del viewport.
<div class="container">Container width: min(800px, 90%)</div>
Función max()
max() devuelve el valor más grande. Es útil para establecer tamaños mínimos que también puedan crecer.
<p>Text sized with max(1rem, 2vw)</p>
Función clamp()
clamp(min, preferred, max) limita un valor entre un mínimo y un máximo. El valor preferido suele ser fluido, como vw.
<h1>Clamped Heading</h1>
clamp() para tipografía fluida
La tipografía fluida con clamp() elimina la necesidad de sobrescribir varias veces font-size mediante media queries:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>Body copy that scales fluidly with the viewport.</p>
clamp() para espaciado fluido
Aplique el mismo patrón al espaciado para obtener márgenes y relleno adaptables de forma natural:
<div class="section">Section with fluid padding</div>
min() para contenedores
Un patrón seguro para contenedores que nunca supera un ancho máximo ni añade desplazamiento horizontal:
<div class="wrapper">Safe wrapper container</div>
Anidamiento de funciones
Puede anidar funciones de comparación para crear expresiones complejas:
<p class="hero-text">Nested min/max inside clamp()</p>
calc() combinado con clamp()
Utilice calc() dentro de clamp() para interpolar con precisión de forma fluida entre dos tamaños:
<h1>Precise fluid heading</h1>
min-content max-content fit-content
CSS también incluye valores de tamaño basados en palabras clave:
min-content: el tamaño más pequeño posible sin desbordamientomax-content: ocupa tanto espacio como necesita el contenidofit-content(): como max-content, pero limitado al valor proporcionado
<span class="tag">Tag label</span>
Compatibilidad con navegadores
min(), max() y clamp() son compatibles con todos los navegadores modernos. No se necesitan prefijos. Puede utilizarlas en cualquier lugar donde se espere un valor de longitud, frecuencia, tiempo o número.
Comprobación rápida
Un encabezado utiliza font-size: clamp(1rem, 4vw, 3rem) en una ventana gráfica de 600px de ancho. ¿Qué tamaño tiene la fuente?
Resumen
min() elige el valor más pequeño y max() elige el más grande. clamp(min, preferred, max) limita un valor fluido dentro de unos límites. Estas funciones permiten crear tipografía y espaciado fluidos modernos, y a menudo eliminan la necesidad de varias sobrescrituras mediante media queries.
Preguntas frecuentes
¿La lección «Funciones Min, Max y Clamp» es gratis?
Sí — el texto completo de «Funciones Min, Max y Clamp» 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 «Funciones Min, Max y Clamp»?
Utilice min(), max() y clamp() para crear tamaños adaptables a las dimensiones del contenedor o de la ventana gráfica. 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 4 de 4.
¿Cuánto tiempo toma la lección «Funciones Min, Max y Clamp»?
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
- Unidades absolutas: px, pt y cm
- Unidades relativas: em y rem
- Unidades de la ventana gráfica: vw, vh y dvh
- Funciones Min, Max y Clamp