Variantes de helper responsivas
Los infijos de breakpoint de POM son mobile-first:
| Infijo | Se aplica desde |
|---|---|
| ninguno | 0px |
sm |
576px |
md |
768px |
lg |
992px |
xl |
1200px |
Ejemplos:
<div class="col-12 col-md-6 col-lg-4">…</div>
<div class="d-flex flex-wrap flex-lg-nowrap">…</div>
<div class="d-none d-lg-flex align-items-center">…</div>La clase sin infijo establece el comportamiento de la anchura más pequeña; un breakpoint posterior la anula a partir de ese mínimo en adelante.
Las columnas de la cuadrícula se detienen en el nivel lg. El breakpoint xl sigue disponible únicamente para las familias de utilidades que documentan explícitamente una variante extra grande.
El dimensionado de imágenes utiliza los helpers no responsivos web-img-fit y web-img-stretch. Aplica consultas de medios específicas del componente cuando una imagen necesite un dimensionado distinto en un breakpoint.
Revisa los cambios de breakpoint
Prueba inmediatamente por debajo y en 576, 768, 992 y 1200 píxeles cuando un componente cambie en esos límites. Prueba también los fallos provocados por el contenido: una etiqueta traducida, una fuente del navegador más grande, un título largo y el foco del teclado pueden poner de manifiesto problemas que una captura limpia de escritorio pasa por alto.
Mantén el mismo elemento semántico y el mismo orden de origen cuando solo cambie la presentación. Duplicar el contenido en elementos separados para móvil y escritorio puede generar una salida repetida para el lector de pantalla y un estado incoherente.
No crees marcado solo para escritorio e intentes repararlo con muchas utilidades. Empieza por el orden de lectura de la pantalla pequeña y añade después los ajustes mínimos necesarios para pantallas más grandes.