Como ejemplo simple de responsive design, observa cómo los bloques se reorganizan cuando cambia el tamaño de la ventana:

• Los bloques se apilan verticalmente
• Las imágenes cambian de tamaño manteniendo sus proporciones

Bloque 1

Bloque 3

El selector de dispositivo en DevTools permite probar responsiveness y adaptación del layout en distintos tipos de dispositivos y tamaños de pantalla: desde móviles hasta pantallas anchas.

1. Abrir DevTools F12
2. Haz clic en el icono de dispositivo a la izquierda de Elements o usa el atajo de teclado:
   • Windows/Linux — Ctrl + Shift + M
   • macOS — Cmd + Shift + M
3. Selecciona un dispositivo de la lista Dimensions o especifica una resolución personalizada usando la opción "Responsive"

1. Selección de dispositivos: los elementos de UI se muestran correctamente en dispositivos de distintos tipos y tamaños de pantalla.
2. Rotación del dispositivo: el layout se adapta cuando cambia la orientación del dispositivo (portrait/landscape).
   Para rotar el dispositivo en DevTools, haz clic en el icono con dos flechas.
3. Comprobación de fuentes e imágenes: las fuentes e imágenes escalan según el tamaño de pantalla.
4. Comprobación de elementos de navegación: el menú móvil "hamburger" se muestra y funciona correctamente.
5. Comprobación de elementos interactivos: botones, formularios y otros elementos funcionan correctamente en distintos dispositivos.