Le query multimediali non hanno effetto sul ridimensionamento del browser

Question

Utilizzo le query multimediali per creare una versione mobile di un sito Web per un client. Quando ridimensiono il browser, le query multimediali non hanno effetto, tuttavia hanno effetto quando il sito viene visualizzato su ciascun dispositivo: sono solo curioso di sapere perché le query multimediali non abbiano effetto quando ridimensiono la finestra del browser stessa cioè Firefox.

Qualsiasi input è molto apprezzato.

codice che sto usando:

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 720px) { 
    #container { 
     width: 100% !important; 
     } 
    } 

Answer 1

Non ho postato un esempio di codice, in modo sto cercando di indovinare: se si utilizza l'attributo: max-device-width o min-device-width , funzionerà solo su dispositivi con quella larghezza e ignorerà il ridimensionamento manuale del browser.

È necessario modificare l'attributo su: larghezza massima/larghezza minima.

@media screen and (min-width: 1024px){ 
    /* some CSS here */ 
} 

Controllare qui:

In mezzi CSS la differenza tra la larghezza e il dispositivo-larghezza può essere un po 'confuso , così lascia esporre su questo un po'. la larghezza del dispositivo si riferisce alla larghezza del dispositivo , in altre parole, la risoluzione dello schermo del dispositivo .

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 2

modificare il codice per -

@media only screen 
and (min-width : 320px) 
and (max-width : 720px) { 
#container { 
    width: 100% !important; 
    } 
} 

alternativamente è possibile mantenere il codice precedente e verificare la natura sensibile del tuo sito web nel computer locale da Mozilla caratteristica Responsive Design Vedi - scorciatoia ' Control + Shift + M '