Primero, gracias a todos por las respuestas y las preciosas pautas, ¡seguro que ayudó!
Permítame agregar mi conclusión:
Prácticamente, orientar la resolución de la pantalla móvil no es una buena experiencia de usuario, la resolución es demasiado alta para la pantalla pequeña, las fuentes serán demasiado pequeñas para leer, los iconos serán demasiado pequeños para hacer clic, etc.
Por lo tanto, ¡es mejor hacer el diseño basado en el tamaño real de la ventana gráfica! De esta manera se basa en lo que un usuario puede ver y sentir.
Para lograrlo en la vida real, debemos agregar una metaetiqueta de ancho de ventana gráfica dentro de los <head>
documentos HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le dice al navegador que renderice la página con un ancho igual al ancho de la pantalla, por lo que se asegura de que el ancho de la página HTML sea igual al ancho de la pantalla en términos de píxeles. El desarrollo se puede planificar fácilmente con consultas de medios dirigidas a diferentes tamaños de ventanas móviles (que están un poco cerca una de la otra), y producirá elementos visualmente más claros.
Por favor, corríjame si estoy equivocado.
Actualizar:
Basado en mi humilde experiencia, sugiero los siguientes pasos para un mejor desarrollo del sitio web receptivo:
1- usa view-port meta (ver arriba), también aumentará la clasificación de la página web en los resultados de búsqueda móvil según Google.
http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Después de la prueba, parece que agregar solo metaportes de vista dará calificaciones a su sitio web en las herramientas de prueba móvil
https://developers.google.com/speed/pagespeed/insights/
2- es posible que desee considerar la aplicación del enfoque móvil primero, siempre es más fácil ir más grande que más pequeño (depende de lo complejo que sea su sitio web)
3- Aplique un sistema híbrido receptivo, una mezcla entre adaptativo (fluido) y receptivo (css media-consultas), para lograr esto:
Utilice el porcentaje para ancho y márgenes horizontales / rellenos. (los márgenes verticales pueden tener un tamaño de píxel fijo si lo desea ... el desplazamiento ya no es un problema)
Use em para fuentes, de esta manera cuando cambie el tamaño de fuente para el cuerpo (o html) en la consulta de medios, todos los elementos CSS se adaptarán a ese tamaño, el uso de px lo convertirá en una pesadilla porque tiene que ir a cada clase CSS y cambia su tamaño de fuente.
Flota los div a la izquierda para que se alineen correctamente al espacio disponible (o a la derecha si tu diseño así lo requiere)
4- Defina los puntos de ruptura , use una herramienta de prueba receptiva para eso. Utilizo la vista de diseño sensible de Firefox, simplemente reduzco el ancho hasta llegar al punto en que el sitio web falla (por ejemplo, 500 px), es decir, un punto de quiebre.
Aplique las nuevas reglas CSS dentro de la consulta de medios para ese punto de interrupción (500 px),
5- ¡ recuerda preservar la calidad y claridad del sitio web! Si los elementos se vuelven poco claros y demasiado cercanos entre sí, expanda el ancho de los elementos para ocupar el ancho del contenedor y haga que se apilen verticalmente.
y recuerde dar un nuevo tamaño de fuente para el cuerpo para que todos los subelementos hereden una fuente más grande y sean más legibles.
6- Repita la prueba de respuesta y defina su segundo punto de ruptura. ¡Lo más probable es que no obtenga muchos puntos de ruptura porque estamos usando un diseño fluido aquí y aquí es donde usar los porcentajes valdrá la pena!
Trabajé en un sitio web grande con elementos de diseño pesados antes y solo requería 2 consultas de medios :)
Espero que eso ayude