Diseño responsive by Camila Forero https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd en-us 2022-09-16 13:51:03 UTC 2026-01-30 19:31:58 UTC hello@padlet.com https://padlet.net/icons/png/1f4f1.png ¿Qué es el diseño web responsivo? (RWD) camilaforero1007 https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2303783409 Un diseño web responsive es el que es capaz de adaptarse a pantallas de diferentes tamaños con un solo sitio web. El sistema detecta automáticamente el ancho de la pantalla y a partir de ahí adapta todos los elementos de la página, desde el tamaño de letra hasta las imágenes y los menús, para ofrecer al usuario la mejor experiencia posible.]]> 2022-09-19 22:02:07 UTC https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2303783409 ¿Qué es el meta tag viewport y que hace? camilaforero1007 https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2303789211 Indica al navegador el tamaño de la ventana o área visible de una pantalla, generalmente, de dispositivos móviles como smartphones o tabletas, por lo que juega un rol crucial en la optimización móvil.
Se encarga de escalar los contenidos a mostrar, adaptando las páginas web a la longitud y anchura de cualquier dispositivo y asegurándose de que todo el contenido sea legible y se muestre de forma correcta y completa en cualquier pantalla.
El viewport puede ser integrado en los archivos HTML de dos maneras: 1. Directamente en el documento. 2. Referenciado en un archivo CSS. En cualquiera de estos casos, la sintaxis apenas difiere.
Así pues, para incluirlo en el archivo HTML como una meta etiqueta, se utiliza el código:
<meta name=viewport content="width=device-width, initial-scale=1">
]]> 2022-09-19 22:05:35 UTC https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2303789211 Técnicas efectivas usadas en el diseño web responsivo para adaptarse a dispositivos móviles y tabletas camilaforero1007 https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2303790920
Media Queries de CSS para Tamaños de Pantalla y Orientaciones Diferentes
Las Media Queries te permiten estilizar elementos basado en el ancho del viewport (área visible de un navegador). Una estrategia popular de CSS consiste en escribir los estilos móviles primero y construir sobre estos los estilos más complejos, específicos de escritorio.
Flexbox
El módulo Diseño de Caja Flexible (Flexible Box Layout) proporciona una manera más eficiente de diseñar, alinear y distribuir espacio entre los ítems en un contenedor, incluso cuando su tamaño es dinámico — De ahí la palabra "flex".
Al combinar media queries con flexbox lograremos una rápida adaptación de los contenidos.

Desplazamiento horizontal con Overflow Scroll
Esta técnica define que se debe mostrar cuando se desborda del viewport.
Los usos comunes de esta técnica incluyen menús desplegables y tablas, pues esta muestra barras de desplazamiento.]]> 2022-09-19 22:07:50 UTC https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2303790920 Cuáles herramientas gratuitas en los navegadores te ayudan asimular y monitorear la experiencia del usuario en dispositivosmóviles y tabletas camilaforero1007 https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2303791995
Emulación móvil en Chrome DevTools
Las Chrome DevTools (Herramientas para Desarrolladores de Chrome) proporcionan emulación móvil para un rango de tabletas y dispositivos móviles. También ofrece una opción "Responsive" que te permite definir un tamaño personalizado del viewport.

]]> 2022-09-19 22:09:06 UTC https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2303791995 camilaforero1007 https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2305427174 2022-09-20 17:36:39 UTC https://padlet.com/camilaforero1007/f3oun6skvxjkl1wd/wish/2305427174