Ajustar estilo con Media Query entre dos valores

[tavoqiqe]

Iniciado por twilvaro

Personalmente, creo que lo mejor es ir añadiendo media queries según sea preciso. Me explico:

Pongamos que tienes tres articles. En la versión escritorio (o tableta) cada article ocupa un tercio del ancho de la pantalla (33.333333%). Vas reduciendo el tamaño de la ventana del navegador, y cuando veas que no se visualizan correctamente (por ejemplo, se hacen muy largos y estrechos) le metes un media query que diga que a partir de ese ancho pasen a a ocupar 100% y que se representen, por lo tanto, en cascada uno bajo el otro. Si esto se diese por ejemplo a partir de 550px de ancho (max-width: 550px), ya sabes que en todos los dispositivos con menos de 550px de ancho se va a ver correctamente. ¿Que a partir de 400px el tamaño fuente es muy grande y se ve feo? Otro media query reduciendo el font-size del body.

Cuando se dice responsive, es diseñar una web apta para cualquier tipo de resolución, sensible al ancho de cualquier dispositivo, haciendo un layout basado en porcentajes (si se basa en medidas absolutas o relativas hablamos de adaptative). No es pensar "quiero que se vea correcto en los que tengan entre 320px y 480px de ancho", es pensar "quiero que se vea correcto en cualquiera". Esto se consigue cambiando el ancho del navegador, viendo el comportamiento de la web y añadiendo un media query cada vez que se precise.

No digo que no haya que tener en cuenta las resoluciones de las distintas plataformas, pero sí que hay que hacerlo en su justa medida.

Respecto a que en qué web puedes ver estas resoluciones, aunque mi compañero te ha dejado una, yo te dejaré la que yo consulto que está bastante bien: [url]http://screensiz.es/[/url].

Muchas gracias por tu respuesta, en serio muy completa y ese consejo que me diste sin duda lo utilizaré !, ahora una pregunta mas, ¿como sabes cual es el ancho del navegador cuando lo vas reduciendo?