# Sizes (ancho y alto)
> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.
- Página canónica: https://quicklycss.cl/docs/sizes.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt
Utilidades · Dimensiones
Controla dimensiones automáticas, porcentuales, fraccionarias, relativas al viewport y límites mínimos o máximos.
v2.0
%
## Proporciones
Escalas porcentuales y fracciones frecuentes para ancho y alto.
↔
## Viewport
`vw` y `vh` permiten dimensionar respecto de la ventana.
8
## Responsive
Ocho breakpoints aplican fracciones, porcentajes y dimensiones de viewport.
i
## La unidad cambia la referencia
`%` depende del contenedor, `vw/vh` depende del viewport y `full` necesita una dimensión resoluble en el elemento padre.
Código + resultado
## Compara formas de definir el ancho
Todos los resultados se miden dentro del mismo contenedor para que la diferencia sea evidente.
HTML
Resultado aplicado 100% del contenedor
Contenedor de referencia
Elemento
.w-full ocupa todo el ancho disponible del contenedor padre.
```html
Elemento
```
.wp-50 calcula la mitad del ancho del contenedor padre.
```html
Elemento
```
.w-1/3 expresa una fracción frecuente sin introducir un porcentaje manual.
```html
Elemento
```
.w-fit ajusta el ancho al contenido sin superar el espacio disponible.
```html
Elemento
```
La utilidad base define 50%; desde 1024px, .wp-1024-75 la reemplaza por 75%.
```html
Elemento
```
Escalas y opciones
## Explora cada familia de tamaños
Elige la referencia adecuada: contenido, contenedor, viewport o límites mínimos y máximos.
Ancho porcentual `.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%
Alto porcentual `.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%
Dependencia Si el padre no tiene una altura resoluble, un porcentaje vertical puede producir un resultado distinto del esperado.
Fracciones frecuentes La misma proporción existe para ancho con `.w-*` y para alto con `.h-*`.
`width / height`
`.w-1/2``.h-1/2`
50%
`.w-1/3``.h-1/3`
33.333%
`.w-2/3``.h-2/3`
66.667%
`.w-1/4``.h-1/4`
25%
`.w-3/4``.h-3/4`
75%
Tamaños intrínsecos y completos Estas opciones definen cómo se relaciona el elemento con su contenido, contenedor o viewport.
`.w-* / .h-*`
Ancho aplicado
Contenido
`.w-auto`
Alto aplicado
Contenido
`.h-auto`
Sigue las reglas normales de tamaño del elemento.
Ancho aplicado
Contenido
`.w-full`
Alto aplicado
Contenido
`.h-full`
Ocupa el 100% de la dimensión calculable del contenedor.
Ancho aplicado
Contenido
`.w-min`
Alto aplicado
Contenido
`.h-min`
Adopta la dimensión mínima que admite el contenido.
Ancho aplicado
Contenido
`.w-max`
Alto aplicado
Contenido
`.h-max`
Adopta la dimensión ideal sin comprimir el contenido.
Ancho aplicado
Contenido
`.w-fit`
Alto aplicado
Contenido
`.h-fit`
Se ajusta al contenido y al espacio disponible.
Ancho aplicado
Contenido
`.w-screen`
La medida continúa hasta completar 100vw.
Alto aplicado
Contenido
`.h-screen`
La medida continúa hasta completar 100vh.
Usa 100vw para el ancho o 100vh para el alto.
Dimensiones del viewport Estas clases ignoran el tamaño del contenedor y toman como referencia la ventana visible; las cajas de demostración contienen la medida completa.
`vw / vh`
10vw
`.vw-10` 10% del ancho del viewport.
30vw
`.vw-30` 30% del ancho del viewport.
10vh
`.vh-10` 10% del alto del viewport.
30vh
`.vh-30` 30% del alto del viewport.
Límites mínimos y máximos Estas clases no fijan la dimensión: establecen hasta dónde puede reducirse o crecer el elemento.
`min-* / max-*`
Mínimo horizontal
mínimo 60%
`.wp-20 .min-w-60`
El ancho solicitado es 20%, pero `.min-w-60` impide que baje de 60%.
Máximo horizontal
máximo 40%
`.w-full .max-w-40`
`.w-full` intenta ocupar todo el ancho, pero `.max-w-40` lo limita a 40%.
Mínimo vertical
mínimo 60%
`.hp-20 .min-h-60`
La altura base de 20% aumenta hasta el mínimo permitido de 60%.
Máximo vertical
máximo 40%
`.h-full .max-h-40`
La altura completa se detiene en 40% por el límite máximo.
Referencia del contenedor Usa `.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.
Referencia del viewport `.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`.
`640` min-width .wp-640-75
`768` min-width .wp-768-75
`1024` min-width .wp-1024-75
`1280` min-width .wp-1280-75
`1536` min-width .wp-1536-75
`2560` min-width .wp-2560-75
`3840` min-width .wp-3840-75
`6016` min-width .wp-6016-75
HTML
```html
Contenido adaptable
```
El elemento comienza al 100%, pasa al 75% desde 768px y al 50% desde 1280px.
MIN-HEIGHT DEL VIEWPORT
```html
```
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.
Orden de la clase El patrón es `.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 |
Responsive Las variantes se activan mediante `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
01
### Elige la referencia
Usa porcentajes para el contenedor y viewport únicamente cuando la ventana sea la referencia real.
02
### Evita alturas frágiles
Una altura porcentual necesita una altura definida o calculable en su contenedor padre.
03
### Limita sin fijar
Usa min y max cuando el contenido deba conservar flexibilidad dentro de ciertos límites.
04
### Base antes de responsive
Define primero el tamaño general y sobrescríbelo sólo en los breakpoints necesarios.