Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Inspección de Páginas Web | Diseño Web Responsivo en CSS
Técnicas Avanzadas de CSS

bookInspección de Páginas Web

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.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 6. Capítulo 4

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.04

bookInspección de Páginas Web

Desliza para mostrar el menú

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.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 6. Capítulo 4
some-alt