Medienabfragen wirken sich nicht auf die Browser-Größenänderung aus

Question

Ich verwende Medienabfragen, um eine mobile Version einer Website für einen Kunden zu erstellen. Wenn ich die Größe des Browsers ändere, werden die Medienabfragen nicht wirksam, sie werden jedoch wirksam, wenn die Website auf jedem Gerät angezeigt wird - ich bin nur neugierig, warum die Medienabfragen nicht wirksam werden, wenn ich die Größe des Browserfensters selbst ändere zB Firefox.

Jede Eingabe wird sehr geschätzt.

-Code ich verwende:

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

Answer 1

Sie nicht ein Beispiel von Code nicht veröffentlichen, so vermute ich: Wenn Sie Attribut verwenden: max-device-width oder min-device-width Es funktioniert nur auf Geräten mit dieser Breite und ignoriert die manuelle Browser-Größenanpassung.

Sie sollten das Attribut ändern in: max-width/min-width.

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

prüfen:

In CSS Medien die Differenz zwischen Breite und geräte Breite verworren etwas sein kann, lässt so auslegen auf, dass ein bisschen. Geräte-Breite bezieht sich auf die Breite des Geräts selbst, mit anderen Worten, die Bildschirmauflösung von das Gerät.

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

Answer 2

ändern Sie Ihren Code -

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

abwechselnd können Sie Ihre vorherigen Code halten und überprüfen Sie die ansprechende Art Ihrer Website in lokalen Computer von Mozilla Responsive Design-View-Funktion - Abkürzung ' Control + Shift + M '