Para obtener más información sobre cómo hacer que su sitio sea adaptable, consulte Tableta adaptable.
Un punto de ruptura es el tamaño en el que el diseño se ajusta a un ancho de pantalla específico. Los puntos de ruptura permiten que los diseños se adapten a medida que se escalan hacia arriba y hacia abajo. En DudaFlex, los puntos de ruptura predeterminados son los siguientes:
Desktop (1025 px a 1399 px)
Desktop ancho (1400 px en adelante)
Tableta (768 px a 1024 px)
Móvil (767 px y menos)
Móvil horizontal (468 px a 767 px)
Para obtener mejores resultados, debe verificar los cambios para los puntos de ruptura móviles en un dispositivo móvil y no cambiando el tamaño de la pantalla de desktop.
Usted puede cambiar entre los puntos de ruptura en la parte superior de la página haciendo clic en las diferentes vistas.
Los cambios hechos en el punto de ruptura principal (desktop) afectan a todos los puntos de ruptura. Sin embargo, si debe hacer cambios en la posición y el tamaño de los elementos (cambios no estructurales) para algunos puntos de ruptura específicos (por ejemplo, móvil horizontal), estos cambios no afectarán a los otros modos. Los cambios hechos en el punto de ruptura móvil (vertical) afecta al punto de ruptura móvil horizontal.
Cambios estructurales
Los cambios estructurales hechos en un punto de ruptura afectan a todos los otros puntos de ruptura. Cuando está en un punto de ruptura que no es el principal (desktop) y hace un cambio estructural, aparece un mensaje de advertencia para informarle que el cambio afecta a todos los puntos de ruptura. Los siguientes son ejemplos de cambios estructurales:
Eliminar o agregar contenido
Dibujar un widget dentro de un flexbox
Eliminar un widget de un flexbox y colocarlo en la cuadrícula
Eliminar un widget dentro de un contenedor
y más.
Ocultar en un punto de ruptura
Es posible que quiera ocultar ciertos elementos en puntos de ruptura específicos (por ejemplo, ocultar una imagen en dispositivos móviles).
Para ocultar un elemento en un punto de ruptura específico:
- Cambie al punto de ruptura en el que quiere ocultar el elemento haciendo clic en la vista de la barra de navegación superior.
- Haga clic en el elemento que quiere ocultar.
- En el panel Capas, haga clic en el botón Ocultar en este punto de ruptura que está junto al elemento.
Si oculta un elemento que tiene otros elementos dentro (por ejemplo, oculta un contenedor con dos widgets de botones dentro), todos los elementos anidados también se ocultarán en ese punto de ruptura.
Para mostrar un elemento que estaba oculto, en el panel Capas, haga clic en Mostrar en este punto de ruptura que está junto al elemento oculto.
Ocultar elementos en el punto de ruptura principal no afecta a los otros puntos de ruptura. Por ejemplo, un botón oculto en el punto de ruptura principal sigue siendo visible en el punto de ruptura de la tableta (y en todos los otros puntos de ruptura).