Adaptativo - Diseños responsivos
En el desarrollo web moderno tenemos dos enfoques: diseños adaptativos y responsivos.
Las maquetaciones responsivas están diseñadas para tener múltiples variaciones de visualización que pueden pasar suavemente de una a otra, lo que permite estirar y redimensionar los elementos con flexibilidad. Al cambiar el tamaño de la ventana gráfica, los bloques de la página se contraen o estiran suavemente y, en un punto de interrupción específico, cambian de posición para optimizar el uso del espacio horizontal.
Los diseños adaptativos tienen múltiples variaciones de visualización, pero los cambios de diseño se producen a través de saltos fijos entre puntos de interrupción. Una vez que se alcanza un punto de interrupción, el diseño no puede cambiarse hasta que se alcanza el siguiente punto de interrupción.
Práctica
Practiquemos y creemos 2 elementos div. El primer elemento tendrá el diseño adaptativo, y el segundo tendrá el diseño responsivo. Además, necesitamos añadir diferentes valores para la propiedad background-color con el cambio de pantalla.
- Para el ancho de 0 a 320px, el color es
#7f58af. - Para el ancho de 321px a 600px, el color es
#64c5eb. - Para la anchura de 601px a 880px, el color es
#eb4dba. - Para la anchura de 881px, el color es
#feb326.
El HTML tiene el siguiente aspecto:
Para el diseño adaptativo, también necesitamos especificar un ancho específico para el elemento div.
- Para el ancho de 321px a 600px, el ancho es
300px. - Para el ancho de 601px a 880px, el ancho es
580px. - Para el ancho de 881px, el ancho es
860px.
CSS se parece a:
El resultado que obtenemos. Por favor, preste atención al cambio de ancho de pantalla en la parte superior de la grabación:
Seleccione las afirmaciones correctas.
Selecciona unas respuestas correctas
¿Todo estuvo claro?
Contenido del Curso
Advanced CSS Techniques
2. Posicionamiento de Artículo
6. Sitios web y aplicaciones adaptables/responsivos
Advanced CSS Techniques
Adaptativo - Diseños responsivos
En el desarrollo web moderno tenemos dos enfoques: diseños adaptativos y responsivos.
Las maquetaciones responsivas están diseñadas para tener múltiples variaciones de visualización que pueden pasar suavemente de una a otra, lo que permite estirar y redimensionar los elementos con flexibilidad. Al cambiar el tamaño de la ventana gráfica, los bloques de la página se contraen o estiran suavemente y, en un punto de interrupción específico, cambian de posición para optimizar el uso del espacio horizontal.
Los diseños adaptativos tienen múltiples variaciones de visualización, pero los cambios de diseño se producen a través de saltos fijos entre puntos de interrupción. Una vez que se alcanza un punto de interrupción, el diseño no puede cambiarse hasta que se alcanza el siguiente punto de interrupción.
Práctica
Practiquemos y creemos 2 elementos div. El primer elemento tendrá el diseño adaptativo, y el segundo tendrá el diseño responsivo. Además, necesitamos añadir diferentes valores para la propiedad background-color con el cambio de pantalla.
- Para el ancho de 0 a 320px, el color es
#7f58af. - Para el ancho de 321px a 600px, el color es
#64c5eb. - Para la anchura de 601px a 880px, el color es
#eb4dba. - Para la anchura de 881px, el color es
#feb326.
El HTML tiene el siguiente aspecto:
Para el diseño adaptativo, también necesitamos especificar un ancho específico para el elemento div.
- Para el ancho de 321px a 600px, el ancho es
300px. - Para el ancho de 601px a 880px, el ancho es
580px. - Para el ancho de 881px, el ancho es
860px.
CSS se parece a:
El resultado que obtenemos. Por favor, preste atención al cambio de ancho de pantalla en la parte superior de la grabación:
Seleccione las afirmaciones correctas.
Selecciona unas respuestas correctas
¿Todo estuvo claro?
