Comprende los rangos responsive y la tipografía fluida
POM utiliza los mismos cuatro rangos de anchura para la visibilidad del Page Builder y el espaciado responsive, pero la interfaz les asigna etiquetas descriptivas diferentes.
Rangos de anchura
| Anchura | Etiqueta de visibilidad por dispositivo | Etiqueta de espaciado |
|---|---|---|
| Por encima de 992 px | Large | Desktop |
| Al menos 768 px y por debajo de 992 px | Medium | Tablet (horizontal) |
| Al menos 544 px y por debajo de 768 px | Small | Tablet (vertical) |
| Por debajo de 544 px | Extra small | Mobile |
Trata estas como rangos del área de visualización, no como garantías sobre el dispositivo físico del visitante.
La visibilidad y el espaciado se comportan de manera distinta
La visibilidad por dispositivo determina si un componente compatible se muestra en un rango. El grupo Spacing almacena valores independientes de relleno y margen para cada rango.
Un elemento principal oculto también oculta a sus elementos secundarios. Un valor de espaciado cambia el diseño pero no cambia la visibilidad.
La tipografía es fluida
H1–H6 y Display 1–4 pueden usar un tamaño base más un tamaño de fuente relativo a la anchura del área de visualización. Esto cambia de forma continua con la anchura del área de visualización en lugar de cambiar solo en los cuatro rangos del Page Builder.
Un tamaño de fuente máximo opcional toma el control en anchuras de al menos 1920 px.
Revisa el comportamiento responsive
Comprueba:
- una anchura dentro de cada rango configurado;
- los límites alrededor de 544, 768 y 992 px;
- una pantalla grande de 1920 px o más cuando se configuren tamaños máximos de encabezado;
- anchuras intermedias donde los encabezados fluidos puedan saltar de línea.
Revisa el orden del contenido, la tipografía, el espaciado, los fondos, los controles y el contenido oculto en conjunto. Una página puede superar la comprobación en cuatro capturas fijas y, aun así, fallar entre ellas.
Para una guía detallada sobre el diseño, consulta Rows, columns, spacing, and responsive design.