¿Cuáles son los puntos de interrupción típicos del ancho de pantalla que se deben considerar para las consultas de medios CSS al diseñar un sitio web receptivo, ya que los dispositivos tienen todas las formas y tamaños?

Creo que llegaste a muchos de los anchos importantes en tu comentario de pregunta. Reiterar:

• 320px para retrato de iPhone (y escalado con viewports para pantallas retina de Android y iPhone).
• 760px para iPad retrato.
• 1020 px para iPad landscape.
• 1280px para computadoras portátiles de pantalla ancha.

El siguiente ancho natural es de 1650 px y posiblemente de 1920 px, pero diseñar para pantallas más anchas es un ejercicio de rendimientos decrecientes, y muchas veces incluso los usuarios de pantalla panorámica no usan sus navegadores en pantalla completa (el texto es demasiado incómodo para leer en ese ancho) .

Mirando un sitio moderno de alto tráfico como nike.com, los principales puntos de interrupción que usan son 480px, 768px, 960px y 1280px, pero tienen puntos de interrupción menores a 1440px y 1600px.

Como estamos viendo> 70% de ancho de resolución del dispositivo> 1280px según el tráfico de nuestro sitio web (Q2 2014 – vea las estadísticas a continuación), agregamos un punto de interrupción x-large (> 1330) a todos nuestros sitios.

Para un diseño receptivo típico,

  / * Dispositivos extra pequeños (teléfonos, hasta 480 px) * /
 @media screen y (ancho máximo: 767px) {
 }
 / * Dispositivos pequeños (tabletas, 768 px y más) * /
 @media (ancho mínimo: 768 px) y (ancho máximo: 991 px) {
 }
 / * tabletas / computadoras de escritorio y hasta ----------- * /
 @media (ancho mínimo: 992 px) y (ancho máximo: 1199 px) {
 }
 / * escritorios grandes y superiores ----------- * /
 @media screen y (min-width: 1200px) {
 } 

Bootstrap 3 puntos de interrupción:

Estoy de acuerdo con muchos de los comentarios anteriores de que la capacidad de respuesta real intenta funcionar fuera de los tamaños de dispositivo estándar. Es impulsado por su flujo de contenido. Asegúrese de nunca tener un desplazamiento horizontal y que su información sea fácil de leer e interactuar. Si comienza a ser demasiado pequeño, muévalo hacia abajo.

Hay algunos casos que tengo para anchos de pantalla específicos

Uno es con video / flash incorporado y contenido gráfico interactivo. Teniendo en cuenta que estos elementos ahora podrían funcionar en dispositivos móviles, o sería difícil interactuar con ellos, deberían ocultarse o cambiarse a enlaces / imágenes en lugar de incrustaciones y aplicaciones para que puedan abrirse como una nueva aplicación o en el reproductor de video respectivo .

El otro es con ciertos sitios web (por ejemplo, un restaurante) cuando sé que un usuario está en un dispositivo móvil, supongo que probablemente estén buscando cosas diferentes que un usuario de escritorio, así que hago que el número de teléfono, el enlace del mapa y el menú estén más disponibles y en la parte superior para una referencia rápida.

Bueno, resulta que estaba a mitad de libro cuando hice esta pregunta, y al día siguiente leí la página donde el autor enumera sus puntos de corte recomendados. Espero que esté bien con todos que cite ese pasaje aquí. Si está listo para lanzarse de cabeza al diseño / codificación de manera receptiva, el diseño web receptivo de Ethan Marcotte es probablemente una lectura obligada: http://www.abookapart.com/produc …

320 píxeles: para dispositivos de pantalla pequeña, como teléfonos, en modo vertical.
480 píxeles: para dispositivos de pantalla pequeña, como teléfonos, en modo horizontal.
600 píxeles: tabletas más pequeñas, como Amazon Kindle (600 × 800) y Barnes & Noble Nook (600 × 1024), que se mantienen en modo vertical.
768 píxeles: tabletas de diez pulgadas como el iPad (768 × 1024) en modo vertical.
1024 píxeles: tabletas como el iPad (1024 × 768) en modo horizontal, así como ciertas pantallas de computadoras portátiles, netbooks y de escritorio.
1200 píxeles: para pantallas panorámicas, principalmente navegadores para computadoras portátiles y de escritorio.

No puede confiar en los anchos de pantalla típicos. Estoy recopilando los anchos de la vista de tantos dispositivos como puedo encontrar en esta hoja de cálculo https://docs.google.com/spreadsh …, y verás que hay muchas variaciones en el uso

La respuesta corta: no hay “anchos típicos”. Hay demasiados tamaños de pantalla para crear un sitio web “para TODAS ESTAS pantallas”.

En cambio, un sitio web moderno podría construirse utilizando un enfoque de “móvil primero” y “contenido primero”, así como un sistema de diseño modular, donde los módulos en una página (no la página en su conjunto) pueden tener un número indefinido de interrupción puntos para que funcionen en CUALQUIER tamaño de pantalla.

El enfoque puede verse así:

Usted comienza con un ancho de navegador “pequeño”, apilando elementos / módulos en una columna. Luego, cambia el tamaño del navegador, aumentando su ancho, hasta que el diseño ya no funcione. Este podría ser el caso si las líneas se vuelven demasiado largas para leer correctamente, o si hay mucho espacio vacío alrededor de los elementos (o simplemente: ¡cuando el diseño se ve mal!)

Luego agrega un nuevo punto de interrupción y agrega nuevas reglas CSS para el módulo en cuestión. Entonces, para un módulo dado, desde un ancho “más ancho” hacia arriba, puede reordenar o reubicar elementos, agregar relleno para hacer que la longitud del texto sea óptima, aumentar el tamaño de fuente para el módulo o todos los elementos en la página, etc.

Pasar a “móvil primero” conduce a mejores resultados porque comenzar con un diseño simple de 1 columna y volver a ordenar una vez que hay más espacio disponible es mucho más fácil que tener que ajustar el diseño más complejo de pantallas más grandes a anchos de pantalla cada vez más pequeños.

Un enfoque de “contenido primero” hace posible este enfoque, porque usted sabe cómo se verá el contenido. Esto no significa necesariamente que el texto terminado tenga que estar listo para todas las piezas, pero es esencial tener un CONCEPTO definido (y ejemplos) de cómo se verán el texto y las imágenes.

Tenga en cuenta que uso “pequeño” y “más ancho” en mi texto en relación con los módulos. Una página web moderna podría tener literalmente cientos de puntos de quiebre. No para dispositivos específicos, sino para los módulos en esa página.

Estoy de acuerdo con Paulo, definitivamente no es seguro asumir esos tamaños de píxeles porque realmente depende de su contenido. Sin embargo, tenerlos en mente nunca es algo malo.

Dicho esto al ritmo que están saliendo nuevos dispositivos, literalmente habrá un dispositivo para cada ancho y altura de píxel imaginable en los próximos cinco años. Eso significa que debe diseñar para cada tamaño de ancho y alto de píxel para que su sitio siempre sea fácil de usar sin importar el tamaño de la pantalla.

Paulo tiene razón. Las resoluciones cambian todo el tiempo, y el diseño para más de 5 puntos de interrupción es muy ineficiente. Un buen enfoque es Ricitos de Oro: http://goldilocksapproach.com/

Aquí puede encontrar más información sobre los puntos de interrupción de Consultas de medios para dispositivos estándar en Diseño web receptivo
Puntos de interrupción de consultas de medios para dispositivos estándar en diseño web receptivo

Hice una herramienta simple para aprender consultas de CSS Media, incluidos los tamaños de punto de interrupción 🙂

http://michael-gannon.com/media/ …

También consulte la base de Zurb para obtener ideas sobre cómo abordar la capacidad de respuesta.

El estándar normal que uso es 960 px para cualquier cosa que vaya en el escritorio o las tabletas, pero mantenga el contenido a un ancho máximo de 500 px para dispositivos más pequeños.