Aiuto su media query

[fermat]

salve!
in una pagina web devo cambiare logo a seconda della dimensione dello schermo.
ho messo un div nella pagina, che ha il solo scopo di visualizzare il logo:

<div id="logo"></div>

poi ho creato i loghi di varie dimenioni e un CSS:

@media screen and (max-device-width: 480px) {
    #logo {
        background: url(../images/logo_2000.png) no-repeat center center; 
    }
}

@media screen and (max-device-width: 1024px) {
    #logo {
        background: url(../images/logo_1024.png) no-repeat center center; 
    }
}

@media screen and (max-device-width: 800px) {
    #logo {
        background: url(../images/logo_800.png) no-repeat center center; 
    }
}

@media screen and (max-device-width: 400px) {
    #logo {
        background: url(../images/logo_400.png) no-repeat center center; 
    }
}

nessun risultato, solo che nn capisco dove sbaglio di preciso.
in pratica mi servirebbero 4 regole:
-max-width = 400
-max-width = 800
-max-width = 1024
-max-width > 1024

a parte che nn so come dirgli la regole del maggiore di 1024.
dove sto sbagliando?