Cómo elegir el viewport mínimo y máximo

Un equipo publica un hero fluido con el deslizamiento configurado de 320px a 1920px: todo el rango de pantallas que podían imaginar. El contenedor de su layout se topa en 1200px. En cada viewport más ancho que eso, las columnas se quedan quietas mientras el tipo sigue creciendo: un titular display de 3.157rem que se renderiza a ≈53,9px cuando el contenedor deja de ensancharse ha trepado hasta ≈56,8px a 1920px, dentro de columnas que no ganaron ni un píxel. El texto está desbordando su propio layout: caben menos caracteres por línea, y nada más en la página explica por qué.

El rango de viewport debe abarcar donde tu layout realmente vive: fija vp-min en la pantalla real más pequeña que atiendes —normalmente 360–390px— y vp-max donde tu layout deja de crecer, típicamente el max-width del contenedor. Fuera del rango, el clamp mantiene plano su mínimo o su máximo, lo cual es el comportamiento correcto, no un defecto. Los dos extremos son los números menos comentados de la fórmula fluida, y controlan todo lo que hace la pendiente. Este artículo forma parte de nuestra guía de tipografía fluida.

¿Dónde debe empezar el deslizamiento?

En el viewport más pequeño que tu audiencia usa de verdad: para la mayoría de los productos hoy, un móvil de 360–390px. Fijar vp-min más abajo (320px es el reflejo tradicional) no es peligroso, pero gasta parte de tu deslizamiento en anchos que ya casi no aparecen en las analíticas: la pendiente se aplana para cubrirlos, y los anchos que la gente realmente sostiene reciben menos del cambio. El mínimo del clamp ya protege cualquier ancho más estrecho: un viewport de 300px simplemente recibe el tamaño más pequeño.

El extremo es una propiedad de tu layout y de tu tráfico, no de ningún catálogo de dispositivos: la trampa del modelo de dispositivo que asoló la elección de breakpoints se aplica sin cambios a los extremos fluidos.

¿Dónde debe terminar el deslizamiento?

Donde el layout deja de crecer. Muchos layouts limitan el ancho de su contenido con un max-width de contenedor: más allá de él, el viewport extra se convierte en margen, y la medida (caracteres por línea) queda congelada. Si el tipo sigue deslizándose más allá de ese punto, el tamaño crece contra una longitud de línea fija, que es exactamente el fallo del inicio: texto que desborda sus columnas. Así que una convención de trabajo limpia: vp-max = el max-width del contenedor. Tipo y layout dejan entonces de cambiar al mismo ancho, y la composición que era válida a 1279px sigue siendo válida a 2560px, solo que centrada en más margen.

Si tu contenedor se topa en 1200px, desliza hasta 1200. Si tu layout es genuinamente de ancho completo —sin tope, columnas fluidas hasta arriba— un vp-max más ancho es defendible, porque la longitud de línea sigue creciendo junto con el tipo. La convención no es una ley; es un acuerdo entre dos sistemas sobre dónde termina lo «grande».

¿Qué pasa fuera del rango de viewport?

El clamp se mantiene plano: por debajo de vp-min cada tamaño se asienta en su mínimo, por encima de vp-max en su máximo. Este es el comportamiento diseñado, y vale la pena decirlo con claridad porque parece un error la primera vez que redimensionas más allá de un extremo y nada se mueve. Un monitor ultrawide recibe tus tamaños máximos —la composición más grande que diseñaste—, no una extrapolación de la pendiente del tamaño de un póster. Un plegable de 280px recibe tu mínimo, no texto que colapsa hacia cero. El rango es una promesa sobre dónde ocurre la interpolación; los extremos son promesas sobre lo que pasa en todos los demás sitios.

¿Cuánto cambia el rango la pendiente?

Más que cualquiera de los dos tamaños base. La pendiente es el crecimiento dividido por el rango. Cada unidad vw es el 1% del ancho del viewport (unidades de viewport), así que un rango estrecho concentra el mismo crecimiento en menos por ciento. Aquí está el mismo par de 16→18px en tres rangos:

Los tres se verifican en sus extremos: 15,22 + 0,2174 × 3,6 ≈ 16 y 15,22 + 0,2174 × 12,8 ≈ 18; 15,6 + 0,125 × 3,2 = 16 y 15,6 + 0,125 × 19,2 = 18 exactamente; 14,24 + 0,4902 × 3,6 ≈ 16 y 14,24 + 0,4902 × 7,68 ≈ 18. Los mismos dos tamaños base, tres comportamientos completamente distintos: el rango es donde se define el carácter de un sistema fluido. Puedes sentir la diferencia directamente: abre los controles de rango de viewport y arrastra vp-max hacia dentro; el deslizamiento de la escala se empina visiblemente mientras los tamaños de los extremos se quedan fijos.

¿Debe el deslizamiento coincidir con los breakpoints de la rejilla de layout?

Son sistemas independientes: el tipo fluido no tiene breakpoints propios. La rejilla de layout sigue escalonando sus columnas sin importar lo que haga el tipo. Pero independiente no significa no relacionado: los dos deben coincidir en los bordes. vp-max alineado con el tope del contenedor es uno de esos acuerdos; otro es comprobar el tipo en los anchos donde cambian las columnas, porque un salto de columna cambia la longitud de línea, y la longitud de línea es el contexto en el que viven tus tamaños deslizantes. El deslizamiento no necesita conocer tus breakpoints; necesita terminar donde termina el crecimiento del layout.

Prueba tus extremos

Los extremos son baratos de probar y caros de adivinar: carga el mismo par de 16→18 en el rango estrecho 360→768 y arrastra la vista previa por ambos bordes; observa cómo el deslizamiento termina pronto y se mantiene plano por encima de 768px. Luego fija vp-max en el tope de tu propio contenedor y comprueba la parte superior de tu escala exactamente a ese ancho. Si el titular más grande se ve bien donde las columnas dejan de crecer, tu rango está haciendo su único trabajo: abarcar donde vive el layout, y en ningún otro sitio.