Con las consultas de medios CSS puede usarmax-device-width para apuntar a un ancho de dispositivo (como un dispositivo iPhone o Android) y / o unmax-width que se dirige a un ancho de página.

Si utilizamax-device-widthCuando cambia el tamaño de la ventana del navegador en su escritorio, el CSS no cambia, porque su escritorio no cambia de tamaño.

Si utilizamax-widthCuando cambias el tamaño de la ventana del navegador en tu escritorio, es posible que se te muestre un estilo orientado a dispositivos móviles, como elementos y menús amigables al tacto y ese tipo de cosas.

La orientación a navegadores específicos (¿y dispositivos?) Ahora está en desuso y debería ser un poco más agnóstico con respecto a lo que dirige. ¿Eso se aplica a las consultas de medios también?

¿Por qué apuntarías uno sobre el otro? ¿Cuál es el recomendado?

Este es un ejemplo de una consulta de medios que uso en un sitio web de producción:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

Tiendo a usar ambosmax-device-width ymax-width.