¿Cuáles son las consultas de medios más importantes que se deben utilizar para crear un diseño de respuesta móvil?

Question

Hay muchas consultas de medios diferentes para los tamaños de pantalla del dispositivo móvil. Puede ser abrumador acomodarlos a todos al diseñar un sitio móvil receptivo. ¿Cuáles son los más importantes para usar al diseñar para dispositivos móviles? Encontré este artículo que hace un buen trabajo al delinear las consultas de medios disponibles: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Answer 1

yo recomiendo tomar después Twitter's Bootstrap con sólo estas cuatro preguntas de los medios:

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

Editar: La respuesta original (arriba) fue tomada de la versión 2. Bootstrap desde Bootstrap ha cambiado sus preguntas de los medios en la versión 3. Tenga en cuenta que no hay una consulta explícita para dispositivos de menos de 768px. Esta práctica a veces se denomina primero móvil. Todo lo que está fuera de cualquier consulta de medios se aplica a todos los dispositivos. Todo dentro de un bloque de consulta de medios amplía y anula lo que está disponible en todo el mundo, así como los estilos para todos los dispositivos más pequeños. Piense en ello como una mejora progresiva para un diseño receptivo.

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { ... } 

Échale un vistazo a Bootstrap 3's docs.

Answer 2

1. Diseño en porcentajes y en un principio optimizado para un 15" pantalla +

2. Revisión qué componentes desea ver en un teléfono -. Simplemente mantener el contenido esencial y eliminar los elementos que no funcionan o el desorden la pequeña pantalla. Estos estilos pueden estar dentro de @media (max-width: 480px) {...}

3. Como las cosas se mueven a 10 "o menos, rediseñe sus botones y componentes interactivos para los dedos en lugar del mouse. @media (max-width: 767px) {...}

4. Reduzca el ancho de su navegador. Cuando las cosas no se vean tan bien, entre a la consola y descubra qué estilos se pueden cambiar o qué elementos se deben rediseñar o eliminar. Marque en qué ancho de pantalla se encuentran y cree una consulta de medios.

5. Al final, revise sus consultas de medios para ver si algunos de ellos se pueden agrupar (es decir, si tiene uno a 750 y 767 píxeles de ancho, puede combinarlos en el 767).

Si se siente cómodo w jQuery puede agregar

$(window).resize(function(){ 
    console.log($(window).width()); 
}); 

para obtener el tamaño de la pantalla actual. Agregue algunos píxeles adicionales para una buena medida.

Answer 3

El primer código de Twitter Bootstrap al que hace referencia @cjlarose asume que ha creado su CSS principal para una pantalla que está entre 980px y 1200px de ancho, por lo que básicamente está comenzando con el diseño de escritorio y adaptando todos los demás eso.

Me alegra ver que Twitter ha cambiado a "mobile first" en Bootstrap 3. Es uno de los enfoques más populares para las consultas de medios, y la forma en que prefiero hacerlo. Comienza desde el tamaño más pequeño en lugar de desde el escritorio.

Tenga en cuenta que su sitio en particular puede necesitar consultas diferentes a las que se enumeran allí o en cualquier otra lista.Debe agregar consultas como contenido demandas, no basadas en ninguna plantilla establecida.

Aquí hay algunas consultas de medios que he encontrado más útiles. Estos son sólo algunos ejemplos:

/* Start with baseline CSS, for the smallest browsers. 
    Sometimes I put this into a separate css file and load it first. 
    These are the "mobile first" styles. */ 

... 


/* Then progressively add bigger sizes from small to large */ 

/* Smartphones start somewhere around here */ 
@media (min-width: 300px) { 
} 

/* You might do landscape phones here if your content seems to need it */ 
@media (min-width: 450px) { 
} 

/* Starting into tablets somewhere in here */ 
@media (min-width: 600px) { 
} 

/* Perhaps bigger tablets */ 
@media (min-width: 750px) { 
} 

/* Desktop screen or landscape tablet */ 
@media (min-width: 900px) { 
} 

/* A bit bigger if you need some adjustments around here */ 
@media (min-width: 1100px) { 
} 

/* Widescreens */ 
@media (min-width: 1500px) { 
} 

Lo más importante es que puede que no necesite todos estos, o puede que desee cambiar los números en función de lo que su contenido se parece. No creo que haya reglas realmente duras sobre cuántos o dónde ubicar los puntos de ruptura. Estoy haciendo un sitio ahora que solo necesita un punto de interrupción porque el contenido es bastante simple, pero también he hecho sitios que se parecen más al código anterior.

No incluí el código de visualización de retina. Eso es útil si está cambiando imágenes de resolución normal para imágenes de alta resolución en pantallas de alta resolución, pero de lo contrario no es tan útil.