Ajustar estilo con Media Query entre dos valores

[tavoqiqe]

Buen día, tengo una duda.

En este momento quiero ajustar una página web a dispositivos móviles, debido a las distintas resoluciones que existen en los telefonos quiero saber como ajustar estos dispositivos con un solo media query, ya que por ejemplo el mas pequeño seria 320 de ancho que seria en este caso un iphone pero esta el nuevo iphone 5 y el galaxy S4 que son mas grandes e incluso el S4 es mas grande que el iphone 5, entonces debido a que hay uno menor y otro mayor, ¿como debo escribir el media query para que ajuste el diseño desde el iphone de 320 px de ancho hasta el galaxy S4?

Espero me hayan entendido, gracias de antemano por su interés y respuestas

[comablck]

algo asi..

@media only screen and (min-width: 320px) and (max-width: 479px) {
...
}

el max-width puede variar dependiendo hasta q ancho maximo queres mantenga el estilo de esa resolucion

[pzin]

Yo incluso dejaría sólo el max-width, no creo que vayas a diseñar para algo inferior a 320 pixeles.

[tavoqiqe]

Iniciado por comablck

algo asi..



el max-width puede variar dependiendo hasta q ancho maximo queres mantenga el estilo de esa resolucion

Muchas gracias por tu respuesta, ahora si no es mucha molestia, ¿saben cuales son las medidas en pixeles del iphone 5 y/o samsung galaxy S4?

encuentro que es de un alto de 1136, pero con el ipad utilicé una altura de 1024 px

[pzin]

Iniciado por tavoqiqe

Muchas gracias por tu respuesta, ahora si no es mucha molestia, ¿saben cuales son las medidas en pixeles del iphone 5 y/o samsung galaxy S4?

Yo utilizo esta tabla, que van actualizando: http://i-skool.co.uk/mobile-developm...viewport-sizes

[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: http://screensiz.es/.

[pzin]

Yo personalmente prefiero aquello de mobile first. Con una buena planificación suele car mejores resultados que la forma de trabajar contraria.

[twilvaro]

Estoy de acuerdo, yo también trabajo mobile-first. Es más, la forma de trabajar que le he explicado es precisamente la que utilizo, pero en reversa. ¿Cuando es óptimo poner los articles en una misma fila? Pues ahí va el media query (min-width).

[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?