La creación de diseños responsivos y adaptativos es un aspecto fundamental del desarrollo web moderno. Siempre se busca que una página web sea accesible en todos los dispositivos. Afortunadamente, los desarrolladores web cuentan con un conjunto sólido de herramientas integradas en los navegadores web.

Consideremos las herramientas web de Chrome:

Herramientas

Para acceder a las herramientas de diseño responsivo y comenzar a utilizarlas, necesitamos lo siguiente:

1. Abrir las herramientas de desarrollo como hicimos anteriormente. Las formas posibles son: usando el ratón, haciendo clic derecho y seleccionando el campo "Inspeccionar", o utilizando el atajo de teclado "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (Mac);
2. Hacer clic en el icono 5. Se activa el modo responsivo. Para cerrar el modo responsivo, debemos hacer clic nuevamente en el icono 5.

Funcionalidades adicionales:

1. Podemos cambiar (imitar) el ancho del dispositivo arrastrando el elemento 6;
2. Podemos seleccionar un dispositivo específico mediante el campo 1. Hay algunos dispositivos ampliamente utilizados por los usuarios;
3. Podemos establecer el ancho (campo 2) y la altura (campo 3) del tamaño de pantalla del dispositivo;
4. Podemos cambiar la escala (campo 4). Generalmente, se utiliza cuando trabajamos con valores grandes y necesitamos ver todo el diseño;
5. 7 es el viewport. Vemos la visualización del sitio web para ese tamaño de pantalla en ancho y alto.

Nota

Todos los navegadores modernos (por ejemplo, Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, etc.) cuentan con el mismo conjunto de herramientas. No hay diferencia en el navegador que seleccionemos.