css - teorico - tesis implementacion de una biblioteca virtual

Puntos de corte comunes para consultas de medios en un sitio sensible

Question

Así que estoy trabajando en mi primer sitio sensible que hace un uso extensivo de las consultas de los medios. Me preguntaba si hay algunos anchos de página comunes que debería optimizar.

Probablemente tendré un ancho máximo (sin fluidez total). Creo que tendré unos 3-5 anchos de conjunto con pequeñas transiciones divertidas de CSS3 entre ellos (similar a cómo funciona CSS Tricks ).

Actualmente los números que estoy usando son algo arbitrarios:

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

Además, creo que he leído que algunos dispositivos móviles no se comportan como se espera (con @media ). ¿Dónde entra esto en juego y cómo debo lidiar con estas situaciones?

Answer 1

Al decidir puntos de interrupción para sus consultas de medios, tenga en cuenta estas realidades:

• Hay cientos de diferentes tamaños de pantalla en miles de dispositivos diferentes.
• El futuro traerá nuevos tamaños de pantalla.
• Apple, Samsung, Microsoft, LG, Nokia y cualquier otro fabricante de dispositivos pueden, en cualquier momento, cambiar el tamaño de la pantalla de sus modelos populares.

Con tantas posibilidades de visualización, la coincidencia de puntos de interrupción con dispositivos específicos no suena como una estrategia eficiente. Mantenerse al día con lo que es popular, lo nuevo y lo que ha cambiado será una tarea interminable.

Un mejor enfoque puede ser establecer puntos de interrupción basados ​​en el contenido y el diseño.

Con este enfoque, su sitio usa sus puntos de corte naturales para adaptarse a todos los tamaños de vista, en lugar de puntos de corte artificiales que se dirigen a tamaños de pantalla actualmente comunes.

Este método es tan simple y fácil que puede ser difícil de creer:

1. Ejecute su sitio web en una computadora de escritorio o portátil.
2. A medida que reduce la ventana del navegador, observe cómo responde el sitio web.
3. Cuando llegue al punto en que su diseño ya no es perfecto, ese es su primer punto de quiebre.
4. Ajuste su sitio para ese tamaño de pantalla (que puede no tener relación con ningún dispositivo).
5. Sigue estrechando la ventana del navegador.
6. Cuando llegue al siguiente problema de disposición, ese es su segundo punto de interrupción.
7. ... y así sucesivamente y así sucesivamente.

Por supuesto, si primero está diseñando dispositivos móviles, entonces el proceso va en reversa: comience con una pantalla estrecha y continúe su camino de salida.

Con los puntos críticos naturales ya no es necesario enfocarse en un universo gigante de tamaños de vista porque su sitio se adaptará a cualquier dispositivo, tanto ahora como en el futuro.

Según un desarrollador , este enfoque lleva los puntos de ruptura de círculo completo a su intención original:

No estoy seguro de cómo surgió la frase "puntos de interrupción específicos del dispositivo" de todos modos ... Como lo he entendido, el término "punto de interrupción" siempre fue una referencia a donde el contenido o el diseño se "rompería" ( es decir, aparecer defectuoso) y, por lo tanto, necesitaría aplicar una consulta de medios en ese punto. Pero supongo que es solo semántica, siempre pensé que era de sentido común referirme a puntos de ruptura en el contexto de contenido o diseño.

~ Louis Lazaris, ImpressiveWebs

_{fuente: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450}

Más información (sitios externos):

• Por qué no necesita puntos de interrupción específicos del dispositivo
• Establecer puntos de interrupción en el diseño receptivo
• Google Developers: cómo elegir puntos de interrupción
• El enfoque Goldilocks para el diseño receptivo
• Tamaños de vistas (una lista de cientos de dispositivos y tamaños de ventanas)
• Consultas de medios para dispositivos estándar (una lista de consultas de medios dirigidas a dispositivos populares)

Answer 2

Esto es lo que uso ...

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

Hay todo tipo de otros, según corresponda (ancho mínimo sin ancho máximo o ancho máximo sin ancho mínimo), pero esta es mi configuración base.

Personalmente, nunca entendí los anchos impares que usa mucha gente. Por ejemplo, 320 y más tiene cinco incrementos de consulta de medios CSS3: 480, 600, 768, 992 y 1382px.

Eso no tiene ningún sentido para mí. Las interrupciones lógicas están a intervalos de 320px (320, 640, 960, 1280, 1600, 1920). Tenga en cuenta que estas interrupciones pueden dar un diseño ligeramente diferente para casi cualquier dispositivo en cualquier orientación (omnia es 240x400, iphone es 320x480, droid x es 480x858, ipad es 768x1024, galaxy s3 es 720x1280, y están hablando de 1920x1080 tabletas).

JJ

Answer 3

algunas resoluciones para buscar:

pantalla de iphone (muchos otros teléfonos inteligentes tienen tamaños de pantalla similares: resolución de 960 por 640 píxeles a 326 ppi http://www.apple.com/iphone/specs.html

Pantalla ipad (muchas otras tabletas tienen tamaños de pantalla similares Resolución de 1024 por 768 píxeles a 132 píxeles por pulgada (ppi) http://www.apple.com/ipad/specs/

pantalla "normal" muchas pantallas normales también tienen una resolución de 1024 por 768 píxeles, de acuerdo con: http://www.w3schools.com/browsers/browsers_display.asp pero no estoy avalando su confiabilidad.

Estoy buscando más información ahora.

Answer 4

• Esta es una guía bastante útil para los tamaños de pantalla de los dispositivos móviles.
• Gran guía para estadísticas sobre resoluciones de pantalla
• Los datos de Google Analytics sobre resoluciones también pueden ser valiosos si tiene acceso a ellos.

Además, definitivamente recomendaría usar device-width para los tamaños de tu dispositivo móvil, a menos que quieras que los usuarios vean tus estilos de dispositivo cuando cambian el tamaño de la ventana de su navegador en un dispositivo que no sea móvil. width es el ancho de la ventana gráfica, y el ancho del device-width es la resolución actual del dispositivo.

Además, creo que he leído que algunos dispositivos móviles no se comportan como se espera (con @media).

Estás en lo correcto. Muchos dispositivos no le proporcionarán el width ni el width device-width que espera, especialmente al cambiar de paisaje a retrato (a menudo le dan el ancho del paisaje cuando está en vertical). El autoenfoque del dispositivo también puede generar problemas. Usar la metaetiqueta de la ventana gráfica puede ayudar con muchos de estos problemas. (Más información al respecto aquí)