Mit CSS-Medienabfragen können Sie verwendenmax-device-width um eine Gerätebreite (z. B. ein iPhone oder Android-Gerät) und / oder amax-width das zielt auf eine Seitenbreite.

Wenn du benutztmax-device-widthWenn Sie die Größe des Browserfensters auf Ihrem Desktop ändern, ändert sich das CSS nicht, da sich die Größe Ihres Desktops nicht ändert.

Wenn du benutztmax-widthWenn Sie die Größe des Browserfensters auf Ihrem Desktop ändern, wird möglicherweise ein mobiles Design angezeigt, z. B. berührungsfreundliche Elemente und Menüs und dergleichen.

Das Targeting auf bestimmte Browser (und Geräte?) Ist jetzt veraltet und Sie sollten etwas agnostischer mit dem sein, was Sie als Ziel angeben. Gilt das auch für Medienanfragen?

Warum würden Sie eine über die andere richten? Welches ist das empfohlene?

Dies ist ein Beispiel für eine Medienabfrage, die ich auf einer Produktionswebsite verwende:

@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... */
}

Ich neige dazu, beide zu verwendenmax-device-width undmax-width.