Te conviene seguir el camino contrario, es decir, utilizar el concepto Mobile First (móvil primero) en el orden en que vincules las hojas CSS.
La primera debería ser la versión a una columna, sin media queries, para que móviles que no procesan media queries se queden con el diseño a una columna. La segunda hoja CSS, deberías vincularla con una media querie con min-width:400px donde flotan dos columnas. La tercera hoja, con min-width:600px y flotas 3 columnas. Como tablets y PC soportan media queries, no tendrás problemas si usas un script compatibilizador para navegadores viejos, como el de: http://code.google.com/p/css3-mediaqueries-js/ Te sugiero ver estas diapos: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu Y una recopilación mía sobre el tema del año pasado (algunas cosas cambiaron, pero el concepto móvil primero continúa vigente): http://www.slideshare.net/hbeati/web-mvil-inclusiva-y-accesible Saludos! -- Hernán Beati http://www.saberweb.com.ar > > a) Limitar el ancho. Que nunca sea más de 1200, para que los que tengan > resoluciones mayores no vean una página ilegible. > > Para eso, en el body podemos añadir esto: > > max-width: 1220px; > > b) Luego vamos con las media querys. Entonces, podrías hacer esto: > > En normal se ven las tres columnas, cada una con el 31% del ancho > disponible > > Un poco más chico, hasta 600, solo dos, cada una con aproximadamente el > 49% > del ancho disponible > > Ya con menos de 400, se desflotan las columnas1 y se ponen al 100. > > Algo así: > > Normal: > > .columna1 { > float:left; > width:31%; > margin: 0.5%; > overflow:hidden; > height:33em; > box-sizing:border-box; > -webkit-box-sizing:border-box; > -moz-box-sizing:border-box; > } > > /* Responsive */ > > @media screen and (max-width:620px){ > .columna1 { > width:45%; > float:left; > } > } > @media screen and (max-width:400px){ > .columna1{ > float:none; > width:100%; > margin:0 auto; > } > } > > > > > > > El 24 de octubre de 2012 16:11, german vaquer > <germ...@telefonica.net>escribió: > >> Hola! >> Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la >> clase >> columna1 y la clase imagen columna 1, y ahora ya se ve bien a >> resoluciones >> mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven >> a >> descolocar la disposición de las imágenes y su contenido. >> http://www.pruebasgerman.com/companyo/entorn.html >> >> Que tengo que hacer mediaqueries específicos para cada resolución para >> que >> me quede todo ok?. >> >> Saludos i gracias a todos por vuestra ayuda. >> >> Germán Vaquer >> >> -----Mensaje original----- >> From: marcos méndez filesi >> Sent: Wednesday, October 24, 2012 12:37 AM >> To: Ovillo, la lista de CSS en castellano >> Subject: Re: [Ovillo] duda responsive design >> >> + cosas. >> >> *1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...), >> como te ocurre con la segunda de la segunda fila, conviene que >> especifiques >> una altura máxima a las imágenes. Para eso puedes añadir una clase a las >> imágenes >> >> .img_columna1 { >> width:100% !important; >> max-height: 10em; >> overflow:hidden; >> margin:1em; >> box-sizing:border-box; >> -webkit-box-sizing:border-box; >> -moz-box-sizing:border-box; >> } >> >> *2)* En vez de >> >> <meta name="viewport" content="width=device-width"> >> >> mejor así >> >> <meta name="viewport" content="width=device-width, initial-scale=1, >> user-scalable=yes"> >> >> *3)* Como estás con cajitas flotantes, te conviene que todas las >> columnas >> estén dentro de un div que las contenga y en ese es importante que >> añadas >> overflow:hidden, para que la tostadora del explorer haga las cosas bien. >> >> 4) No veo que el diseño sea responsive. No sé si es que aún no has >> empezado. Te dejo un enlace a una guía que espero te sirva de ayuda. >> >> http://www.mmfilesi.com/blog/tutorial-responsive-web-design-i >> >> SUERTE. >> >> El 23 de octubre de 2012 23:56, german vaquer >> <germ...@telefonica.net>escribió: >> >> > Hola buenas! >> > >> > Estoy reconvirtiendo una web ya realizada en una web con diseño >> responsivo >> > para visualizar en cualquier dispositivo. El problema que tengo es en >> la >> > siguiente página de dicha web: >> > >> > http://www.pruebasgerman.com/companyo/entorn.html >> > >> > Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me >> > queden en la misma posición que las 3 primeras y las 3 de la parte >> > central, >> > el resto de imágenes se me salen de madre y se me descolocan y no sé >> el >> > porqué, puesto que el código css es el mismo para todas las imágenes. >> > Alguna sugerencia?, he repasado el código por si hubiese algo que me >> > faltase, pero la verdad es que no he visto nada raro. y eso que le he >> dado >> > bastantes vueltas. >> > >> > Gracias de antemano: saludos >> > >> > Germán Vaquer >> > _______________________________________________ >> > Lista de distribución Ovillo >> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> > Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> > http://lists.ovillo.org/mailman/listinfo/ovillo >> > >> >> >> >> -- >> Marcos Méndez Filesi >> http://www.mmfilesi.com/ >> _______________________________________________ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> >> _______________________________________________ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> > > > > -- > Marcos Méndez Filesi > http://www.mmfilesi.com/ > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
