Resumen de los puntos de interrupción
Los puntos de interrupción son rangos de píxeles que corresponden al ancho de diferentes dispositivos, como computadoras de escritorio, tabletas y dispositivos móviles. Cuando el ancho de un dispositivo se encuentra dentro de un rango de píxeles predefinido por los puntos de interrupción, el diseño del sitio se ajusta para optimizar el contenido y la orientación del dispositivo. Por ejemplo, si visito un sitio en una computadora de escritorio, puedo ver el menú completo, pero cuando lo visito en mi dispositivo móvil, veo un menú desplegable.
Nota:
Este artículo solo es relevante para los usuarios que comenzaron a usar Flex después del 18 de julio de 2022. Si usa la versión 1.0 de Flex, consultePuntos de interrupción de Flex (1.0).
Puntos de interrupción flexibles
El punto de interrupción principal de Flex es el escritorio. Si realiza cambios de diseño o contenido en el punto de interrupción del escritorio, estos se aplican automáticamente a los otros puntos de interrupción para escritorios, tabletas y dispositivos móviles. Si modifica el contenido, como añadir un widget, reemplazar una imagen o editar texto, el cambio se aplica automáticamente a todos los otros puntos de interrupción, independientemente del punto de interrupción en el que se realizó.
Sin embargo, si modifica la posición o el tamaño de un elemento en puntos de interrupción específicos, estos cambios no se aplicarán a los otros. Por ejemplo, si modifica el tamaño de un elemento en el punto de interrupción móvil, el cambio solo se aplicará a los puntos de interrupción móvil y horizontal, y no a los otros.
En Flex, los puntos de interrupción predeterminados son:
Escritorio (1025px-1399px)
Escritorio ancho (1400 px y más)
Tableta (768px-1024px)
Móvil (767 px y menos)
Paisaje móvil (468px-767px)
Nota:
Recomendamos verificar los cambios de puntos de interrupción móviles en un dispositivo móvil, en lugar de cambiar el tamaño de la pantalla de una computadora de escritorio.
Puede cambiar entre puntos de interrupción en la parte superior de la página haciendo clic en las diferentes vistas.
Cambios estructurales
Los cambios estructurales realizados en cualquier punto de interrupción afectan a todos los otros. Al realizar un cambio estructural en un punto de interrupción diferente del principal (escritorio), se muestra un mensaje de advertencia para informarle de que el cambio afecta a todos los puntos de interrupción. Los cambios estructurales incluyen cambios de contenido o diseño, como añadir o eliminar secciones, columnas, cuadros flexibles, widgets o cuadrículas avanzadas.
Ocultar en el punto de interrupción
Puedes ocultar ciertos elementos en puntos de interrupción específicos desde el panel de capas o desde el menú flotante del elemento. Por ejemplo, puedes ocultar una imagen en dispositivos móviles sin que esto afecte a otros puntos de interrupción.
Nota:
Si ocultas un elemento que contiene otros elementos anidados, todos los elementos anidados también se ocultarán en ese punto de interrupción. Por ejemplo, si ocultas una columna flexible, también se ocultarán los widgets dentro de ella.
Para ocultar un elemento en un punto de interrupción específico:
Cambia al punto de interrupción en el que deseas ocultar el elemento haciendo clic en la vista en la navegación superior.
Haz clic en el elemento que deseas ocultar.
Haz clic en el icono de tres puntos horizontales (
) en el menú flotante y selecciona Ocultar en este punto de interrupción. O bien, en el panel de capas, haz clic en Ocultar en este punto de interrupción junto al elemento.
Anulaciones de puntos de interrupción
Al cambiar el contenido, puedes realizar el cambio desde cualquier punto de interrupción y afectará a todos. Sin embargo, hay ocasiones en las que es necesario anular un punto de interrupción. Por ejemplo, en el punto de interrupción principal, una imagen está a la derecha de un párrafo, pero en dispositivos móviles es necesario que la imagen esté arriba y el párrafo debajo.
Los siguientes son cambios que puedes realizar en un elemento y anular el punto de interrupción principal:
Alineación
Posición
Tamaño
Espaciado
Nota:
Una vez que anulas un punto de interrupción, no puedes revertir el cambio modificando el estilo en el punto de interrupción principal en el mismo objeto.
