Introducción Responsive design
0 recomendaciones245 vistas
Este documento describe los principios básicos del diseño responsivo, incluyendo que se trata de adaptar sitios web a múltiples dispositivos, el uso de medidas relativas, medias queries y patrones como mostly fluid, column drop y layout shifter para lograr esta adaptación de forma efectiva.
Introducción Responsive design
- 2. La mejor forma de aprender es haciendo
- 3. ¿Qué es Responsive Design? Son todos los procedimientos que utilizamos para adaptar la web a múltiples dispositivos
- 4. Procedimientos o técnicas Videos Imágenes Medidas relativas Displays Slider
- 5. ¿Qué es el Viewport ? Área que esta disponible en la pantalla del navegador
- 6. Media queries Diferentes representaciones para su ancho, alto, imagen del dispositivo
- 8. Mostly Fluid Es una cuadricula fluida que se ajusta a las márgenes de la pantalla mas ancha pero se mantiene el mismo tamaño. https://developers.google.com/web/fundamentals/d esign-and-ui/responsive/patterns/mostly-fluid?hl=es
- 9. Column Drop En el caso de los diseños con varias columnas de ancho completo, durante el proceso de colocación de columnas, éstas únicamente se colocan de forma vertical, es decir, apilar las columnas verticalmente https://developers.google.com/web/fundamentals/desi gn-and-ui/responsive/patterns/column-drop?hl=es
- 10. Layout Shifter La clave de este diseño es el modo en que el contenido se mueve, en lugar de redistribuirse y colocarse debajo de otras columnas https://developers.google.com/web/fundamentals/desi gn-and-ui/responsive/patterns/layout-shifter?hl=es
- 11. Tiny tweaks permite realizar pequeños cambios en el diseño, como ajustar el tamaño de la fuente, cambiar el tamaño de las imágenes o desplazar el contenido de diferentes maneras. https://developers.google.com/web/fundamentals/ design-and-ui/responsive/patterns/tiny-
- 12. Off canvas Se coloca fuera de la pantalla y solo se muestra cuando el tamaño de la pantalla es lo suficientemente grande https://developers.google.com/web/fundamentals/ design-and-ui/responsive/patterns/off-canvas?hl=es