Hallo

/*Breite: 961px - unendlich*/
@media all and (min-width: 961px)

mit

/*Breite: 771px - 960px*/

@media all and (min-width: 771px)

Das ist sicher nicht das, was du willst (zweiteres). Du willst bestimmt eher

@media all and (min-width: 771px) and (max-width: 960px)

Zumindest ist das das, was dein Kommentar suggeriert.

Mit der richtigen Reihenfolge der Definitionen wäre sein Vorgehen richtig, auch wenn Gunnar auf der ungeeigneten verwendung von px als Einheit herumreiten wird. Bei Verwendung von min-width *und* max-width kann es, abhängig von der verwendeten Maßeinheit passieren, dass sich zwischen max-width des ersten Queries und min-width des Zweiten eine undefinierte Lücke auftut.

Werden erst die Angaben zum schmaleren Viewport (mit min-width) notiert und danach durch die Angaben zum breiteren Viewport überschrieben, passt das schon. Allerdings muss man halt auch darauf achten, was bei welchen Änderungen überschrieben werden soll und ob einem irgendeine Spezifität dazwischenhaut.

Tschö, Auge