Como los portátiles y los monitores externos son cada vez más grandes, Webflow se mantiene al día añadiendo no uno, ni dos, sino tres nuevos puntos de interrupción grandes de 1280px, 1440px y 1920px.
Si has estado prestando mucha atención a nuestras actualizaciones recientes, es posible que lo vieras venir cuando añadimos controles para cambiar el tamaño del lienzo del Diseñador en diciembre. O quizás leíste sobre ello en nuestro resumen de actualizaciones de producto del cuarto trimestre. Sea como sea, ya están aquí, así que vamos a profundizar en qué son estos nuevos puntos de interrupción y cómo funcionan.
3 nuevos puntos de interrupción para dispositivos grandes
El lanzamiento de hoy añade 3 nuevos puntos de interrupción a los 4 existentes que han estado en Webflow desde el principio. Esto significa que los proyectos de Webflow ahora tienen 7 puntos de interrupción, siendo los 3 más grandes los nuevos:
- 1920px: los estilos se aplican a pantallas de 1920px de ancho en adelante
- 1440px: los estilos se aplican a pantallas de 1440px de ancho en adelante
- 1280px: los estilos se aplican a pantallas de 1280px de ancho en adelante
- Escritorio (base): los estilos se aplican a todos los dispositivos a menos que se sobrescriban en otros puntos de interrupción
- Tableta: los estilos se aplican a pantallas de 991px de ancho o menos
- Móvil horizontal: los estilos se aplican a pantallas de 767px de ancho o menos
- Móvil vertical: los estilos se aplican a pantallas de 478px de ancho o menos
Crea diseños con CSS grid, visualmente
Descubre la facilidad, velocidad y potencia sin precedentes de CSS grid en Webflow, ahora con nuevos controles directamente en el lienzo.
Cómo afectan los nuevos puntos de interrupción a los estilos en otros dispositivos
Es importante tener en cuenta que estos nuevos puntos de interrupción aplican estilos a pantallas de un ancho determinado y superior, a diferencia de los puntos de interrupción existentes por debajo de escritorio, que aplican estilos a pantallas de un ancho determinado e inferior. Esto significa que los estilos aplicados para los nuevos puntos de interrupción se propagan hacia arriba a dispositivos más grandes, mientras que los estilos aplicados en los puntos de interrupción existentes por debajo de escritorio se propagan hacia abajo a dispositivos más pequeños.
Cómo funciona: los nuevos puntos de interrupción en acción
Para mantener el orden en la barra superior del Diseñador, hemos guardado los 3 puntos de interrupción más grandes detrás de un menú desplegable para que puedas añadir individualmente los que necesites. Para añadir estilos en un nuevo punto de interrupción, abre ese menú desplegable y selecciona el punto de interrupción que quieras añadir. Una vez seleccionado, aparecerá en la navegación superior junto con los demás.
Por el momento, una vez que has añadido uno de estos puntos de interrupción más grandes, no puedes eliminarlos de la barra de interfaz superior. Dicho esto, puedes eliminar todos los estilos únicos asociados a ese punto de interrupción cambiando a él y haciendo clic con la tecla Opción (en Mac) o Alt (en Windows) sobre los estilos cuyas etiquetas sean azules, lo que indica que tienen estilos configurados para este dispositivo específico.
¿Cómo vas a usar estos nuevos puntos de interrupción en tus sitios? ¡Cuéntanos en los comentarios!
