He visto muchos sitios que responden tanto a navegadores de escritorio como a navegadores de teléfonos móviles, estoy trabajando en un sitio y tengo la siguiente configuración de hoja de estilo: (El sitio web de Hicks Design es un buen ejemplo de lo que quiero lograr si lo necesita. )

/* Normal styles go here */

@media screen and (min-device-width:321px)
{
    /* Styles */
}
@media screen and (min-width:701px)
{
    /* Styles */
}
@media screen and (min-width:1025px)
{
    /* Styles */
}
@media screen and (min-width:2049px)
{
    /* Styles */
}

Sin embargo, mi hoja de estilo de arriba solo parece funcionar en los navegadores de escritorio. (probado con Android Firefox y el navegador predeterminado de Android en un Sony Xperia Ray)

Las reglas del sitio de diseño de Hicks son muy similares a las mías, sin embargo, utilizan min y max, pero para mí tampoco parece funcionar tanto en los navegadores móviles como en los de escritorio. (Planeo optimizar mis consultas de medios más, solo estoy tratando de conseguir que los conceptos básicos funcionen como quiero en este momento).

Si uso max-device-width en lugar de max-width, responde a los navegadores móviles, pero no a los de escritorio ...

He intentado lo siguiente para solucionar el problema:

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
    /* Styles */
}

además:

@media screen and (max-width:480px), and (max-device-width:480px)
{
    /* Styles */
}

Sin embargo, no creo que ninguno de estos sea correcto, ya que la barra de herramientas del desarrollador web para Firefox se queja de ello. También he intentado algunas variaciones en las reglas anteriores, pero todavía no puedo hacer que funcione.

Por lo que entiendo, max-width lee el ancho de la ventana gráfica (es decir, ... el ancho de la ventana del navegador) y max-device-width lee el ancho real de la pantalla que está usando para ver el sitio. - Estoy confundido por qué max-width no parece leer el ancho del navegador del móvil.

Creo que me estoy perdiendo algo obvio acerca de las consultas de medios aquí ... No parece tener sentido que si quiero que mi sitio responda en los navegadores de escritorio y móviles, debo hacer una copia de todas mis consultas de medios y simplemente cambiar. la consulta de 'screen and (max-width)' a 'screen and (max-device-width)' o viceversa. (que me da vergüenza incluso escribir como una solución aquí)

¿Cómo puedo combinar las reglas (max-width) y (max-device-width) o cómo puedo lograr esto?

Si prefieres no leer todo lo anterior:

Estoy usando la pantalla @media y (max-width: 480px) sin embargo, parece que solo la pantalla @media y (max-device-width: 480px) funciona en móviles. ¿Cómo puedo combinar estas dos reglas para lograr un diseño receptivo en los navegadores móviles y de escritorio?