Media Queries - Mobile vs Desktop Browser

Question

Ho visto molti siti che sono reattivi sia su browser desktop e browser di telefonia mobile, sto lavorando su un sito e ho il seguente setup di fogli di stile: (Il sito Web di Hicks Design è un buon esempio di quello che voglio ottenere se ne hai bisogno)

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

Tuttavia il mio foglio di stile sopra sembra funzionare solo sui browser desktop. (testato con Android Firefox e il browser Android predefinito su un Sony Xperia Ray)

Le regole del sito di progettazione Hicks sono molto simili alle mie, tuttavia fanno uso di min e max ma per me non sembra funzionare entrambi i browser mobili e desktop. (Ho intenzione di ottimizzare le mie domande sui media di più sto solo cercando di ottenere le basi per funzionare come voglio loro al momento).

Se uso max-device-width, invece di max-width diventa reattivo sul browser per dispositivi mobili, ma non i browser desktop ...

Ho provato quanto segue seguente per aggirare il problema:

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

anche:

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

Tuttavia non credo che uno di questi sono corretti, come la barra degli strumenti web developer per Firefox lamenta. Ho anche provato alcune varianti delle regole di cui sopra, ma ancora non riesco a farlo funzionare.

Da quello che capisco max-width legge la larghezza della finestra (diciamo .. .la larghezza della finestra del browser) e la larghezza massima del dispositivo legge la larghezza effettiva dello schermo che si sta utilizzando per visualizzare il sito. - Sono confuso perché max-width non sembra leggere la larghezza del browser del cellulare.

Penso che probabilmente manchi qualcosa di ovvio sulle query multimediali qui ... Non sembra logico che se voglio che il mio sito sia reattivo su browser desktop e mobile devo fare una copia di tutti i miei media query e basta cambiare la query da 'schermo e (max-larghezza)' a 'schermo e (max-device-width)' o viceversa. (che mi vergogno di scrivere anche qui come soluzione alternativa)

Come posso combinare le regole (larghezza massima) e (larghezza massima del dispositivo) o come posso ottenerlo?

Se si preferisce non leggere tutto quanto sopra:

Sto usando @ media schermo e (max-width: 480px), tuttavia sembra solo @ media schermo e (max-device-width: 480px) funziona su cellulari. Come posso combinare entrambe queste regole per ottenere un design reattivo sui browser mobili e desktop?

Answer 1

Ci sono un sacco di media là fuori, e se si desidera selezionare solo dalle sue proprietà, utilizzare la parola chiave all:

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

Edit:

Unire regole con o:

@media all and (prop1:val1), all and (prop2:val2) 
{ 
    /* Styles */ 
} 

Unire regole con e:

@media all and (prop1:val1) and (prop2:val2) 
{ 
    /* Styles */ 
} 

Answer 2

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

Risolto il problema, le risposte precedenti mi hanno aiutato a votare. Grazie.