El diseño web móvil tiene muchos beneficios, pero sólo cuando se utiliza correctamente. Las técnicas apropiadas permitirán que la página se presente bien en pantallas grandes, pantallas pequeñas y pantallas de PDA pequeñas. Sin embargo, una estructura de código deficiente será desastrosa para el diseño fluido. Por lo tanto, necesitamos encontrar soluciones factibles a las deficiencias de la mayoría de los diseños de flujo.
Si usted, como diseñador, ha hecho un esfuerzo adicional para crear un diseño fluido y funcional, ¿por qué no dar un paso más y hacerlo compatible con todas las resoluciones en lugar de limitarse a la mayoría de las pantallas? Puede utilizar algunas técnicas para crear un diseño inesperadamente adaptable que permanezca funcionalmente intacto a medida que cambian las resoluciones de pantalla.
En este artículo, analizaremos métodos probados para crear diseños CSS responsivos 100% funcionales y brindaremos una lista detallada de otros tutoriales y prácticas:
También puedes consultar artículos anteriores:
1. Diseño fluido usando cuadrícula
La mayoría de nosotros hemos oído hablar del sistema de cuadrícula 960 para diseñar páginas web de ancho fijo. El uso del sistema de cuadrícula 960 hace que los diseños de ancho fijo sean preferibles a los diseños fluidos. Sin embargo, existe una manera de crear un diseño flexible basado en cuadrículas. Técnicamente hablando, la estructura del código del diseño elástico es diferente de la del diseño fluido, pero proporciona casi el mismo efecto al usuario.
¿Qué es un diseño de flujo?
Las cuadrículas fluidas se crean mediante el uso inteligente de divs, porcentajes y cálculos matemáticos simples. Esta idea proviene de Ethan Marcotte, quien reconoció que "em" es una mejora con respecto al tamaño de fuente. Revisaremos este concepto básico aquí, pero para una comprensión integral y detallada de este enfoque, consulte "Flowing Grid", un tutorial completo sobre cómo crear diseños flexibles basados en cuadrículas.
La idea es utilizar tamaños relativos, combinar porcentajes y ems, y utilizar divisiones simples para encontrar los anchos de píxeles correspondientes que se utilizan en diseños de ancho fijo.
ventaja :