Comunidad de diseño web y desarrollo en internet online

media queries para responsive design ¿cuántos usar?

Citar            
MensajeEscrito el 21 Jun 2013 10:51 am
¿Cuántos media queries usáis para hacer una web con responsive design? ¿Movil, tablet, portátil y sobremesa? O también tenéis en cuenta los modelos, iPad, Galaxy, iPhone...

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 21 Jun 2013 03:20 pm
No se si hay una regla, pero yo uso los 4 que tu mencionas .

Por Gamernoob

71 de clabLevel



Genero:Masculino  

Front-end :D

chrome
Citar            
MensajeEscrito el 21 Jun 2013 06:25 pm
No creo que haya una regla, pero no sé que dispositivos tomar como referencia.

Estas son las medidas de varios tablets,
768x1024 iPad, HP Touchpad
800x1280 Galaxy Tab, Sony Xperia, Motorola

¿Qué sería lo mejor? Por ejemplo, para los tablets portrait,

Código CSS :

@media only screen
and (min-width : 768px)    /*tamaño ipad*/
and (max-width : 800px)    /*tamaño galaxy*/
and (orientation : portrait) {
   /*css styles*/
   }

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 22 Jun 2013 08:03 pm
no necesitas un media query para cada dispositivo, con un solo punto de quiebre puedes hacer una apariencia para pantallas grandes (desde 1080 o 1200 px de ancho para arriba), y otra para móviles (ancho menor al punto de quiebre escogido) que se acomode a cualquier dispositivo móvil sin importar su marca o resolución.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 24 Jun 2013 06:11 pm
Yo uso 3 media queries, una para mobiles, otra para tablets y una mas para desktop, algunas veces ya siendo muy especial meto una ultima querie para pantallas muy grandes o mobiles de pantalla menor de 240px bueno eso ya cada quien.
Se pueden meter mas pero ya son mas que nada para dispositivos especificos, como iphone por la pantalla retina, o las kindle o el galaxy tab aca te dejo las mas usadas.
http://nmsdvid.com/snippets/

Por k.'

41 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Jun 2013 10:01 pm
Gracias. Lo que me estaba liando es que en los ejemplos que he visto llaman los llaman refiriéndose a un modelo, unos smartphone, otros iphone o galaxy... y pensaba que cada plataforma necesitaba un media query concreto.

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 26 Jun 2013 03:23 am
No existe (o no debiese existir) un número óptimo cuando se trabaja con responsive design, puesto que este no es diseño para iphone, ipad, Galaxy o cualquiera de los otros intentos de andriod por ser relevante. Además considerando todos los dispositivos que existen con distintas resoluciones y todos los que están por salir, no es a prueba de futuro poner breakpoints basado en anchos que se consideran "standard" actualmente.

Responsive design debiese ser "device agnostic" (agnostico al dispositivo) y por lo tanto los puntos de quiebre es recomendable ponerlos de acuerdo al contenido y no a un dispositivo en específico.

Por smokinsalmon

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Jun 2013 02:23 am
Dependiendo de la complejidad del sitio tengo que usar n condiciones, por lo general son 2 o 3 que luego de un diseño elástico, solo reacomodo elementos.

Por LeonidasEsteban

Claber

1127 de clabLevel

12 tutoriales
1 articulo

Genero:Masculino  

Front-End de #mejorandola

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.