Hace algún tiempo me introduje en la técnica actual del Responsive Design, y casualmente descubrí algo interesante, sin embargo nunca he visto que nadie lo comente, postee o publique.
Imagino que muchos lo utilizan, sin embargo piensan que todo el mundo ya lo debe de saber y no lo publican, hoy doy paso a aquellas personas que ya sea van dando sus primeros pasos en diseño web o aquellas que simplemente, nunca habían visto este sencillo tip.
Sin más preámbulos comenzemos:
Wikipedia escribió:
Responsive Design
El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una filosofía de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.
Antes de los media-queries
Antes de decir. "Listo! mi sitio ya está, ahora comenzaré a usar media-queries" estas sencillas líneas te facilitarán la vida y te permirán usar solo los media-queries, para ajustar los pequeños detalles
Código CSS :
body {
display:block;
margin:0 auto;
width:980px;
/*
Seguramente usas un ancho específico para tu sitio
pero si agregas:
*/
max-width:100%;
}
Al pasar este límite, el sitio se ajustará según a la ventana sin usar media queries.
*/
/* También aplica para imágenes: */
img {max-width:100%}
/* Siempre y cuando no uses ancho en porcentajes, sino en pixeles, cuando se llegue al ancho de la imagen, esta se empezará a escalar automáticamente. */
Espero que les sirva. A quienes no lo conocían ya. Y a los usuarios expertos, les pido que no se olviden de los que recién comienzan, todos pasamos por ahí, y hay que dejarles las mejores herramientas.
Saludos a Todos
