Zapytania o media nie są uwzględniane przy zmianie rozmiaru przeglądarki

Question

Używam zapytań o media, aby utworzyć mobilną wersję strony internetowej dla klienta. Kiedy zmieniam rozmiar przeglądarki, zapytania o media nie są uwzględniane, jednak działają po wyświetleniu witryny na każdym urządzeniu - po prostu ciekawi mnie, dlaczego zapytania o media nie działają, gdy zmieniam rozmiar okna przeglądarki tj. Firefox.

Każde wejście jest bardzo doceniane.

kod używam:

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

Answer 1

Nie zakładać przykład kodu, więc zgaduję: Jeśli używasz atrybut: max-device-width lub min-device-width , będzie działać tylko na urządzeniach o tej szerokości i zignoruje ręczną zmianę rozmiaru przeglądarki.

Należy zmienić atrybut na: maksymalna szerokość/minimalna szerokość.

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

Sprawdź tutaj:

W mediach CSS różnica między szerokością i urządzenia szerokości może być nieco zagmatwane, więc pozwala tłumaczyć na tym trochę. szerokość urządzenia odnosi się do szerokości samego urządzenia, innymi słowy, rozdzielczości ekranu urządzenia o wartości .

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

Answer 2

zmienić swój kod do -

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

przemian można zachować swój poprzedni kod i sprawdzić responsive naturę swojej stronie internetowej w komputerze lokalnym przez Mozilla View Responsive design cechą - skrót " Control + Shift + M '