Codificar una página web que responda a todos los dispositivos: ¿dónde puedo encontrar los tamaños requeridos?

Usando, no es seguro. Desde que salió el libro de Ethan Marcotte, la discusión y el trabajo sobre el tema continuaron.

La mayoría de los expertos están de acuerdo en que no debe hacer suposiciones sobre los dispositivos utilizados para acceder a su sitio web, debido a la increíble variedad de dispositivos móviles. Debería ser su contenido y el diseño que hizo lo que define el punto de interrupción, pero no el ancho de un dispositivo en particular.

Fuentes:-

1. https://css-tricks.com/snippets/ …
2. Lógica en consultas de medios | CSS-Tricks
3. Consultas de medios CSS y uso del espacio disponible | CSS-Tricks
4. Tamaños de vista

¡Espero que esto ayude!

Los tamaños de las vistas también serían mi punto de partida.

SIN EMBARGO, no te vuelvas loco tratando de definir una consulta de medios para cada dispositivo, eso es demasiado engorroso y difícil de mantener.

En cambio, use solo una o dos consultas de medios y use unidades relativas en su código para que su sitio web se adapte bien sin importar el dispositivo. Claro, habrá algunos puntos de interrupción de resolución para los que tendrá que ocultar o rediseñar algunos elementos, (como cambiar de un menú de navegación horizontal a un menú de hamburguesas), pero dudaría en alinearme para dispositivos específicos y en su lugar centrarme en las resoluciones donde Su diseño actual comienza a verse pobre.

No es fácil codificar una página web que responde con mayor precisión a todos los dispositivos. Dado que hay muchos más dispositivos con diferentes tamaños de pantalla.

Por lo tanto, es mejor estandarizar los tamaños de pantalla, como la mayoría de los tamaños de pantalla del teléfono no es más de 767px. Si está escribiendo un código que está dirigido a hasta 767px, funcionará para casi todo el tamaño de pantalla hasta 767px. Así que también puedes escribir para tableta y escritorio. Todos los navegadores modernos tienen hoy en día los tamaños de pantalla estándar mencionados en la herramienta para desarrolladores. Puede verificar a qué punto de interrupción desea apuntar: todo depende de su diseño. espero que funcione

¡Gracias!

Pocos de ellos están en su navegador. En Chrome, vaya a ver> Desarrollador> Herramientas de desarrollador y haga clic en el icono del teléfono (su segundo botón izquierdo). Se vería así

Si hace clic en editar, hay algunos más que puede agregar a la lista.

Pero no debe basar sus consultas de medios en esas dimensiones. Debe agregar consultas de medios cuando el sitio frena. Usando `min-` o `max-windth` en lugar de simplemente` width`, terminará asegurándose de que el diseño del sitio se mueva sin problemas. Suponiendo que utilice unidades relativas, por supuesto. Como resultado, usará menos consultas de medios y la probabilidad de que frene su sitio en algún momento es muy baja en comparación.

-Abre Google Chrome.

-Haga clic derecho> inspeccionar elemento.

-Deberías ver una nueva ventana en la parte inferior ahora.

-En la esquina superior izquierda hay un icono de dispositivo. Haz clic en eso.

-Ahora el modo del navegador cambiará al modo receptivo. En el menú desplegable, seleccione u puede navegar a través de diferentes dispositivos y su tamaño se mostrará automáticamente en la parte superior.

http://viewportsizes.com