Utilidades · Dimensiones
Sizes (ancho y alto)
Controla dimensiones automáticas, porcentuales, fraccionarias, relativas al viewport y límites mínimos o máximos.
Proporciones
Escalas porcentuales y fracciones frecuentes para ancho y alto.
Viewport
vw y vh permiten dimensionar respecto de la ventana.
Responsive
Ocho breakpoints aplican fracciones, porcentajes y dimensiones de viewport.
Código + resultado
Compara formas de definir el ancho
Todos los resultados se miden dentro del mismo contenedor para que la diferencia sea evidente.
<div class="w-full">Elemento</div>
<div class="wp-50">Elemento</div>
<div class="w-1/3">Elemento</div>
<div class="w-fit">Elemento</div>
<div class="wp-50 wp-1024-75">Elemento</div>
Escalas y opciones
Explora cada familia de tamaños
Elige la referencia adecuada: contenido, contenedor, viewport o límites mínimos y máximos.
.wp-* usa como referencia el ancho del contenedor.width: %.wp-10
10%
.wp-20
20%
.wp-30
30%
.wp-40
40%
.wp-50
50%
.wp-60
60%
.wp-70
70%
.wp-80
80%
.wp-90
90%
.wp-100
100%
.hp-* necesita una altura calculable en el contenedor.height: %.hp-10
10%
.hp-20
20%
.hp-30
30%
.hp-40
40%
.hp-50
50%
.hp-60
60%
.hp-70
70%
.hp-80
80%
.hp-90
90%
.hp-100
100%
.w-* y para alto con .h-*.width / height.w-1/2.h-1/2.w-1/3.h-1/3.w-2/3.h-2/3.w-1/4.h-1/4.w-3/4.h-3/4.w-* / .h-*.w-auto
.h-auto
Sigue las reglas normales de tamaño del elemento.
.w-full
.h-full
Ocupa el 100% de la dimensión calculable del contenedor.
.w-min
.h-min
Adopta la dimensión mínima que admite el contenido.
.w-max
.h-max
Adopta la dimensión ideal sin comprimir el contenido.
.w-fit
.h-fit
Se ajusta al contenido y al espacio disponible.
.w-screen
La medida continúa hasta completar 100vw.
.h-screen
La medida continúa hasta completar 100vh.
Usa 100vw para el ancho o 100vh para el alto.
vw / vhmin-* / max-*.wp-20 .min-w-60
El ancho solicitado es 20%, pero .min-w-60 impide que baje de 60%.
.w-full .max-w-40
.w-full intenta ocupar todo el ancho, pero .max-w-40 lo limita a 40%.
.hp-20 .min-h-60
La altura base de 20% aumenta hasta el mínimo permitido de 60%.
.h-full .max-h-40
La altura completa se detiene en 40% por el límite máximo.
.min-w-* y .max-w-* para ancho porcentual, o .min-h-* y .max-h-* para alto porcentual. Estas últimas necesitan una altura calculable en el contenedor padre..min-wv-{10…90} y .max-wv-{10…90} limitan con vw; .min-hv-{10…90} y .max-hv-{10…90} limitan con vh. Para un límite de 100vw o 100vh usa las variantes *-screen.Variantes responsivas
Ocho puntos de activación
Inserta el breakpoint después de la familia: .wp-1024-75, .w-768-1/2 o .vh-1280-50.
640min-width.wp-640-75768min-width.wp-768-751024min-width.wp-1024-751280min-width.wp-1280-751536min-width.wp-1536-752560min-width.wp-2560-753840min-width.wp-3840-756016min-width.wp-6016-75<article class="wp-100 wp-768-75 wp-1280-50">
Contenido adaptable
</article>El elemento comienza al 100%, pasa al 75% desde 768px y al 50% desde 1280px.
<section class="min-hv-40 min-hv-768-70">
Contenido adaptable
</section>El mínimo comienza en 40vh y aumenta a 70vh desde 768px. Las variantes responsive de Sizes usan min-width: se activan desde el breakpoint indicado.
.min-hv-{breakpoint}-{valor}. Por ejemplo, .min-hv-1024-60 aplica min-height: 60vh desde 1024px.Referencia
Clases disponibles
La tabla resume las familias que realmente existen en el módulo actual.
| Clases | Unidad o valor | Qué controla | Ejemplo |
|---|---|---|---|
.w-{auto|full|min|max|fit|screen} | Intrínseco, %, vw | Ancho directo. | .w-fit |
.h-{auto|full|min|max|fit|screen} | Intrínseco, %, vh | Alto directo. | .h-full |
.wp-{10…100} | % del contenedor | Ancho en pasos de 10%. | .wp-60 |
.hp-{10…100} | % del contenedor | Alto en pasos de 10%. | .hp-40 |
.w-{fracción} | 1/2, 1/3, 2/3, 1/4, 3/4 | Ancho fraccionario. | .w-2/3 |
.h-{fracción} | 1/2, 1/3, 2/3, 1/4, 3/4 | Alto fraccionario. | .h-1/2 |
.vw-{10…100} / .vh-{10…100} | vw / vh | Dimensión relativa al viewport. | .vw-50 |
.min-w-{0|full|screen} / .max-w-{none|full|screen} | 0, %, vw | Límites horizontales especiales. | .max-w-full |
.min-w-{10|20|30|40|60|70|80|90} / .max-w-{10|20|30|40|60|70|80|90} | % del contenedor | Límites horizontales porcentuales. | .min-w-60 |
.min-wv-{10…90} / .max-wv-{10…90} | vw | Límites relativos al ancho del viewport. | .max-wv-80 |
.min-h-{0|full|screen} / .max-h-{none|full|screen} | 0, %, vh | Límites verticales especiales. | .min-h-screen |
.min-h-{10|20|30|40|60|70|80|90} / .max-h-{10|20|30|40|60|70|80|90} | % del contenedor | Límites verticales porcentuales. | .max-h-40 |
.min-hv-{10…90} / .max-hv-{10…90} | vh | Límites relativos al alto del viewport. | .min-hv-70 |
.{familia}-{bp}-{valor} | 8 breakpoints | Variantes responsive. | .wp-1024-75 |
min-width en 640, 768, 1024, 1280, 1536, 2560, 3840 y 6016 píxeles. Las familias min-wv, max-wv, min-hv y max-hv ofrecen valores de 10 a 90 en cada breakpoint.Recomendaciones
Buenas prácticas de tamaños
Elige la referencia
Usa porcentajes para el contenedor y viewport únicamente cuando la ventana sea la referencia real.
Evita alturas frágiles
Una altura porcentual necesita una altura definida o calculable en su contenedor padre.
Limita sin fijar
Usa min y max cuando el contenido deba conservar flexibilidad dentro de ciertos límites.
Base antes de responsive
Define primero el tamaño general y sobrescríbelo sólo en los breakpoints necesarios.