Breakpoints - Responsive
Los breakpoints definen los puntos a partir de los cuales tu interfaz debe adaptarse a diferentes tamaños de pantalla. Son esenciales para lograr una experiencia realmente responsiva en todos los dispositivos.
- Los breakpoints te permiten ajustar el diseño en función del ancho disponible, activando estilos específicos a medida que el viewport crece. Son la base para construir interfaces que se vean bien en móviles, tablets y escritorios.
- Mobile first: Usamos
@mediaqueries conmin-widthpara aplicar estilos condicionales desde un tamaño mínimo hacia arriba. Esto sigue la filosofíamobile-first, donde se parte de una base simple para móviles y se mejora progresivamente.
Breakpoints disponibles
| Breakpoint | Prefijo | Dimension | px |
|---|---|---|---|
| Mobile | < 30 rem | < 480 px | |
| Small | sm | > 30 rem | > 480 px |
| Medium | md | > 48 rem | > 768 px |
| Large | lg | > 62 rem | > 992 px |
| Extra large | xl | > 80 rem | > 1280 px |
| Extra extra large | xxl | > 96 rem | > 1536 px |
Responsive
Los helpers que usan los breakpoints son los siguientes
Display
Ejemplos
| Clase | Descripcion |
|---|---|
| Oculta el elemento (display: none) para pantallas mayores a md |
| Oculta el elemento para pantallas mobile y para pantallas mayor a md se vuelve un flex (display: flex) |
Spaces
Ejemplos
| Clase | Descripcion |
|---|---|
| Agrega un padding-top de space 2 cuando la pantalla es mayor a sm |
| Agrega un padding-bottom de space 3 para pantallas mobile y cuando la pantalla es mayor a lg configura el padding-bottom de space de 2 |
Flex columns
Ejemplos
| Clase | Descripcion |
|---|---|
| Configura el ancho del componente en una relacion de 6/12 para pantallas mayor a md |
| Configura el ancho del componente en una relacion de 12/12 (es decir el 100%) para pantallas mobile y un ancho con relacion de 4/12 cuando la pantalla es mayor a md |